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

你必须在radiobutton本身调用onChange而不是将它们全部包裹起来的div。

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

Answer 2

有一些纠正。

您缺少form标记包装输入控件
在表单上提交定义事件处理程序，它将接收表单数据。
将onChange事件处理程序附加到单选按钮
将value属性附加到具有某些值的单选按钮

以上更改的渲染：

     render() {
        return (
          <div className="container">
            <form onSubmit={this.handleSubmit} >
            <div className="form-group">
//.....
              <input type="text" ref={input => this.newColumn = input} name="newItemInput" placeholder="Modules" value={this.state.newItemInput} className="form-control"
               //.....
            </div>

            <div className="k-form-field" >
                <input type="radio" name="radio" value="radio1" className="k-radio" onChange={this.handleChange}/>                                        
                                                 type="radio" name="radio" value="radio2" className="k-radio" onChange={this.handleChange}/>
              //.....

              <input type="radio" name="radio" value="radio3" className="k-radio" onChange={this.handleChange}/>
              //.....
            </div>

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

处理程序：

handleSubmit=(event)=>{
    console.log('A form was submitted: ' , this.state); //form data
    event.preventDefault();
    console.log(event);
  }

单选按钮处理程序：

handleChange=(event)=> {
    console.log(event.target.value);
    this.setState({
      ...this.state,
      selectedValue: event.target.value
    });
  };

正在使用 codesandbox

单选按钮反应

2 个答案: