Данные формы не будут привязаны к компоненту React с помощью onChange ()

Question

Я кодировал почтовый сервис для себя и застрял в этой форме React, не меняя состояние при вводе данных формы. Отследил основную проблему в том, что эта форма React не изменяет состояние с помощью onChange () ...

Как я могу связать состояние с формой React, которая обновляется при каждом нажатии клавиши? Использование этих данных формы для последующей передачи в вызов API.

'' '
класс AddContact extends Component {

constructor(props) {
  super(props);
  this.state = {
  'name': '',
  'company': '',
  'linkedin': '',
  'department': '',
  'email': 'Not available'
}

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
    this.setState({ value: event.target.value });
  }

handleSubmit(event) {
}

render() {
return(
  <div>
    <form onSubmit = {this.handleSubmit}>
    <label>
      Name
      <input type="text" value={this.state.name} onchange = {this.handleChange}/>
    </label>
    <label>
      Company
      <input type="text" value={this.state.company} onchange = {this.handleChange}/>
    </label>
    <label>
      LinkedIn Profile
      <input type="text" value={this.state.linkedin} onchange = {this.handleChange}/>
    </label>
    <label>
      Department
      <input type="text" value={this.state.department} onchange = {this.handleChange}/>
    </label>
    <label>
      Email (Optional)
      <input type="text" value={this.state.email} onchange = {this.handleChange}/>
    </label>

        <input type="submit" value="Submit" />
    </form>
  </div>
);

}

}' ''

Answer 1

Вы не изменяете фактические значения формы в состоянии. Эта строка: this.setState({ value: event.target.value }); Изменяет значение клавиши value в состоянии. Поэтому, если бы вы назвали это this.setState({ value: 'potato' });, то ваше состояние выглядело бы так:

this.state = {
  'name': '',
  'company': '',
  'linkedin': '',
  'department': '',
  'email': 'Not available',
  'value': 'potato'
}

Поэтому вам нужно передать фактическое имя поля, которое вы пытаетесь изменить, в функцию onChange. И это еще одна вещь, у вас есть опечатка. Обработчик называется onChange, в случае верблюда. У вас неправильно все строчные буквы.

Итак, вот правильный пример обновления поля 'name'. Во-первых, обновите вашу функцию handleChange следующим образом:

handleChange(field, value) {
     this.setState({ [field]: value });
}

Затем измените ваши входные данные так:

<input type="text" value={this.state.name} onChange={e => this.handleChange('name', e.target.value)}/>