在 React 中使用 ref 获取复选框的值

新手上路,请多包涵

有什么方法可以在 React 中使用 ref 获取复选框的值。正常的方式总是向我返回值“on”。

 var MyForm = React.createClass({
    save: function(){
        console.log(this.refs.check_me.value);
    },

    render: function(){
        return <div><h1>MyForm</h1>
            <div className="checkbox">
                <label>
                    <input type="checkbox" ref="check_me" /> Check me out
                </label>
            </div>
            <button className="btn btn-default" onClick={this.save}>Submit</button>
        </div>
    }
});

原文由 John 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 704
2 个回答

对于复选框,使用“checked”而不是“value”:

 var MyForm = React.createClass({
  save: function () {
    console.log(this.refs.check_me.checked);
  },

  render: function () {
    return <div><h1>MyForm</h1>
      <div className="checkbox">
        <label>
          <input type="checkbox" ref="check_me" /> Check me out
        </label>
      </div>
      <button className="btn btn-default" onClick={this.save}>Submit</button>
    </div>
  }
});

因此:

在此处输入图像描述

原文由 Damien Leroux 发布,翻译遵循 CC BY-SA 3.0 许可协议

有一种经典的方法可以借助以下方法捕获事件和相应的值:

 event.target.checked, event.target.name

你可以看到一个例子:

 class MyForm extends React.Component {
    onChangeFavorite(event){
        console.log(event.target.checked, event.target.name);
    };
    render(){
        return (<div><h1>MyForm</h1>
            <div className="checkbox">
                <label>
                   <input type="checkbox" name="myCheckBox1"
                     onChange={this.onChangeFavorite}
                     defaultChecked={false} />
                   Check me out
                </label>
            </div>
            <button className="btn btn-default" onClick={this.save}>Submit</button>
        </div>)
    };
};

原文由 Roman 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进