#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;