reactjs material-ui和redux表单字段-创建组件

问题描述

我正在尝试使用react redux表单制作字段组件-并使其使用物料ui表单生成多个字段。

这可以在标准输入字段中使用

const renderTextField2 = (fields) => (
  <div>
    <div className="input-row">
      <input {...fields.firstName.input} type="text"/>
      {fields.firstName.Meta.touched && fields.firstName.Meta.error &&
       <span className="error">{fields.firstName.Meta.error}</span>}
    </div>
    <div className="input-row">
      <input {...fields.lastName.input} type="text"/>
      {fields.lastName.Meta.touched && fields.lastName.Meta.error &&
       <span className="error">{fields.lastName.Meta.error}</span>}
    </div>
  </div>
)

但是我想探索或循环以使相关字段成为当前的开发状态，我想在此处放置控制台日志以查看“字段”是什么，但是它将在我放置它的任何地方拒绝。

const renderTextField2 = (fields) => (
    <FormControl component="fieldset" fullWidth={true}>   
      <Formlabel component="legend">mmm </Formlabel>
      <FormGroup
        row
      >
          <Field {...fields.firstName.input} component={renderTextField} label="" />
          <Field {...fields.lastName.input} component={renderTextField} label="" />
      </FormGroup>
    </FormControl>
)


export default renderTextField2;

解决方法

我有类似的工作方式-但我需要选中它

const renderTextField2 = (fields) => (
    <FormControl component="fieldset" fullWidth={true}>   
      <FormLabel component="legend">mmm </FormLabel>
      <FormGroup
        row
      >
          {            
            fields.names.map((item,j) => {
              return(
                <Field key={j} {...fields[item].input} component={renderTextField} label="" />
              )
            })      
          }
      </FormGroup>
    </FormControl>
)


export default renderTextField2;