Блог

Я пытаюсь динамически создавать текстовые поля с помощью data json, проблема возникает, когда я хочу установить значение и функцию onChange для каждого поля.

Я пытался использовать string, но у меня не получилось

значение={ ${this.state}. ${textfield.label} }

значение={ this.state.${textfield.label} }

  this.state = {     
  label1: "",
  label2 : ""     
};
  

}

 {textfields.map((textfield) => {
return(
      <TextField
      key={textfield.label}
      label={textfield.name}
      margin="normal"
      fullWidth
      id={textfield.label}
      required
      value={`${this.state}.`  `${textfield.label}`}
      onChange={e => this.setState({ `${textfield.label}` : e.target.value })}
      />
      )
  })
}
  

проблема заключается в значении и onChange

Я ожидаю значение ={this.state.label1} значение={this.state.label2}

onChange={e => this.setState({ label1: e.target.value })} onChange={e => this.setState({ label2: e.target.value })}

Я получил значение = [object Объект].label1 значение = [object объект].label2

или значение=»this.state.label1″ но в виде строки в значении texfield=»this.state.label1″ но в виде строки в texfield

onChange показывает синтаксическую ошибку

Просто используйте обычный JavaScript внутри фигурных скобок. Вот так:

  value={this.state[textfield.label]}
  

Можете ли вы добавить к ним имя, подобное этому?

{текстовые поля.map((текстовое поле) => {

 return(
      <TextField
      key={textfield.label}
      label={textfield.name}
      margin="normal"
      fullWidth
      id={textfield.label}
      required
    name={textfield.label}
      value={`${this.state}.`  `${textfield.label}`}
      onChange={e => this.setState({ `e.target.name` : e.target.value })}
      />
      )
  })
}