ReactJS флажок остается в силе, даже если не отмечен

Question

Я изо всех сил пытаюсь заполнить мое состояние некоторыми полями ввода данных. это мои поля:

<input type="text" onChange={this.handleChange} name="title"></input>
<input type="number" onChange={this.handleChange} name="amount"></input>
<input type="checkbox" onChange={this.handleChange} name="is_published"></input>
<input type="checkbox" name="isflat"></input>
<input type="checkbox" onChange={this.handleChange} name="isdhaka"></input>
<input type="checkbox" onChange={this.handleChange} name="isrent"></input>
<input type="text" onChange={this.handleChange} name="name"></input>

и это мой метод изменения дескриптора

handleChange = event => {
    const { purchase } = this.state;
    purchase[event.target.name] = event.target.value;
    this.setState({ purchase });
    updateValidators(event.target.name, event.target.value);
  };

Мои проблемы, когда я нажимаю на флажок, он становится истинным как значение, но когда я снова не отмечен флажок, он остается верным снова как значение.

Я не понимаю, почему это происходит. Если флажок не установлен, он возвращает значение false в качестве значения, а когда я нажимаю, он возвращает значение true в качестве значения, но проблема в том, что когда я снимаю флажок, он остается истинным

Может ли кто-нибудь помочь мне в этом случае?

Answer 1

Для входов флажка, input.target.value не указывает, установлен флажок или нет. Значение флажка не изменится, когда вы нажмете на него, поэтому вы получаете только on, что является значением по умолчанию. Вам нужно использовать event.target.checked вместо:

this.setState({
  purchase: {
    [event.target.name]: event.target.checked
  }
});

Answer 2

Причина, по которой ваши элементы input не реагируют на событие onChange и, следовательно, изменения в state, заключается в том, что они не привязаны к state.

* компонента. 1006 * Я бы порекомендовал вам привязать text / number входные элементы к value реквизитам и checkbox входные элементы к checked реквизитам. Таким образом, у нас могут быть разные методы для обработки события onChange (handleChange и handleCheckboxChange)

Например, именно так вы можете связать входные данные с помощью state, привязав их к value и checked соответственно.

<input type="text" onChange={this.handleChange} name="title" value={this.state.purchase.title} />
<input type="number" onChange={this.handleChange} name="amount" value={this.state.purchase.amount} />
<input type="checkbox" onChange={this.handleCheckboxChange} name="is_published" checked={this.state.purchase.is_published} />
<input type="checkbox" name="isflat" onChange={this.handleCheckboxChange} checked={this.state.purchase.isflat} />
<input type="checkbox" onChange={this.handleCheckboxChange} name="isdhaka" checked={this.state.purchase.isdhaka} />
<input type="checkbox" onChange={this.handleCheckboxChange} name="isrent" checked={this.state.purchase.isdhaka} />
<input type="text" onChange={this.handleChange} name="name" value={this.state.purchase.name} />

Кроме того, вы должны использовать setState для обновления state вашего компонента:

handleChange(event) {
  this.setState({
    purchase: {
      [event.target.name]: event.target.value
    }
  });
  // do the rest
}


handleCheckboxChange(event) {
  this.setState({
    [event.target.name]: event.target.checked
  });
 // do the rest 
} 

Answer 3

Вам не хватает атрибута value во всех ваших элементах.

Ваш код должен выглядеть примерно так:

<input type="text" onChange={this.handleChange} name="title" value={this.state.purchase.title} />
<input type="number" onChange={this.handleChange} name="amount" value={this.state.purchase.amount} />
<input type="checkbox" onChange={this.handleChange} name="is_published" value={this.state.purchase.is_published} />
...

Answer 4

handleChange = event => {
  const { purchase } = this.state;
  this.setState({ purchase:  {
    ...purchase,
    [event.target.name]: event.target.value,
  });
  updateValidators(event.target.name, event.target.value);
};

и в ваших флажках установите значения

<input type="checkbox" checked={this.state.purchase.is_published} onChange={this.handleChange} name="is_published" />

вы изменяете состояние в этой строке

purchase[event.target.name] = event.target.value;

это плохой способ