материал reactjs-поля пользовательского интерфейса и формы redux — создание компонента

#javascript #reactjs #material-ui

#javascript #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь создать компонент fields с использованием форм react redux — и сделать так, чтобы он генерировал несколько полей с использованием форм пользовательского интерфейса material.

это работает с использованием стандартных полей ввода

 const renderTextField2 = (fields) => (
  <div>
    <div className="input-row">
      <input {...fields.firstName.input} type="text"/>
      {fields.firstName.meta.touched amp;amp; fields.firstName.meta.error amp;amp;
       <span className="error">{fields.firstName.meta.error}</span>}
    </div>
    <div className="input-row">
      <input {...fields.lastName.input} type="text"/>
      {fields.lastName.meta.touched amp;amp; fields.lastName.meta.error amp;amp;
       <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;
  

Ответ №1:

У меня работает что-то подобное, но мне нужно установить флажки

 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;