Как сбросить переключатель в реагировать JS

Question

Я пытаюсь сбросить переключатель после добавления некоторых данных формы, но их реакция не происходит.

В методе добавления я пытаюсь установить значение состояния переключателя пустым.

Я пробовал разные способы сделать переключатель снова пустым. Ни один из них не работает

Я вижу, как реагирует js логика переключателя.

export class AddColumns extends React.Component{

  constructor(props) {
      super(props);
        this.state={
            newItemInput: '',
            selectedDataValue: '',
            buyItems :['Development','Testing']
        }
      }

handleChangeData = (event) => {
    this.setState({
      ...this.state,
      selectedDataValue: event.target.value
    });
  };

  change (event){
    this.setState({
      [event.target.name]:event.target.value
    });
    console.log("button clicked",this.state);
  };

  addColumnItem(e) {
    e.preventDefault();

  const newItemInput = this.state.newItemInput;
  var newRadioDataValue = this.state.selectedDataValue;

  //doing adding stuff, then reseting all fields

  this.setState({
    newItemInput : '',
    newRadioDataValue: '',   //but this radio button is not reseting
  }) 
  }

 render(){
      return(
        <div className="container">
        <form id="Form" className="form-horizontal" onSubmit={(e) => { this.addColumnItem(e) }}>
          <div className="form-group">
              <label className="sr-only" htmlFor="newItemInput">Add New Item</label>
              <input type ="text" ref ={input => this.newColumn = input} name="newItemInput" placeholder="Modules" value = {this.state.newItemInput} className="form-control" 
                      id="newItemInput" onChange={event => this.change(event)}/>
            </div>

            <div className="form-group">
                  <label className="control-label col-sm-3">Data Type:</label>
                  <div className="col-sm-5">
                    <label className="radio-inline pull-left">
                      <input type="radio" name="radioData" value="InputData" onChange={this.handleChangeData} />Input Data
                    </label>
                    <label className="radio-inline pull-left">
                      <input type="radio" name="radioData" value="TargetData" onChange={this.handleChangeData} />Target Data
                    </label>
                  </div>
                </div>

            <div className="form-group">
              <button type="submit" className="btn btn-primary">Add</button><p>{this.state.messgae}</p>
            </div>
            </form>
          </div>
);
}

Answer 1

Вы должны использовать тот же ключ в вашем setState: this.setState({ selectedDataValue: '' }).

Также вам нужно только указать измененные ключи в setState:

this.setState({
  ...this.state, // this line can be removed
  selectedDataValue: event.target.value
});

EDIT:
Если вы хотите отменить выбор радио, вы можете добавить в checked prop:

state = { ..., radioChecked: false };
...
<input
  type="radio"
  checked={this.state.radioChecked}
  onClick={() => this.setState({ radioChecked: true })}
/>
...
this.setState({ radioChecked: false }); // to clear it