javascript - react 中的单选按钮

Question

我想将单选按钮的值保存到一个状态。

我有一个文本框和几个单选按钮的表单。我想保存文本字段和单选按钮值，以便我可以在表格中呈现这些值。

export class AddColumns extends React.Component{

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

  handleChange(value) {
    this.setState({
          ...state,
          selectedValue: this.state.selectedValue
    });
  };

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

 render(){
      return(
        <div className="container">
          <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="k-form-field" value={this.state.selectedValue} onChange={this.handleChange}>
              <input type="radio" name="radio" id="radio1" className="k-radio" />
              <label className="k-radio-label">RadioButton 1</label>

              <input type="radio" name="radio" id="radio2" className="k-radio" />
              <label className="k-radio-label">RadioButton 2</label>

              <input type="radio" name="radio" id="radio3" className="k-radio" />
              <label className="k-radio-label">RadioButton 3</label>
            </div>

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

我无法获取单选按钮的值，请帮忙

Answer 1

您必须在单选按钮本身而不是包装它们的 div 上调用 onChange。

<input type="radio" name="radio" id="radio1" className="k-radio" onChange={this.handleChange} />