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

是否有任何方法可以使用React中的ref获取复选框的值。正常方式返回值总是“开”给我

var MyForm=React.createClass({
保存：函数（）{
console.log（this.refs.check_me.value）；
},
render:function（）{
返回我的表格
看看我
提交
}
});

您可以通过监听

onChange

并给它一个

状态值，使复选框成为受控元素。请尝试以下操作：

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

  toggleCheckboxValue: () => {
    this.setState({checkBoxValue: !this.state.checkboxValue});
  },

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

var MyForm=React.createClass({
保存：函数（）{
console.log（this.refs.check_me.value）；
},
toggleCheckboxValue:（）=>{
this.setState（{checkBoxValue:！this.state.checkBoxValue}）；
},
render:function（）{
返回我的表格
看看我
提交
}
});

无论何时单击复选框，它都将运行
toggleCheckboxValue
功能，该功能将切换
this.state.checkboxValue
的值

不要忘记初始化代码中的
this.state.checkboxValue
函数

注意：正如ivarni所指出的，您可能需要专门为复选框控制
选中的
值，而不是
值。尽管这两种解决方案都可以使用。
对于复选框，请使用“选中”而不是“值”：

var MyForm=React.createClass({
保存：函数（）{
console.log（this.refs.check\u me.checked）；
},
渲染：函数（）{
返回我的表格
看看我
提交
}
});

因此：

有一种经典的方法可以通过以下帮助捕捉事件和相应的值：

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>)
    };
};

类MyForm扩展了React.Component{
onChangeFavorite（事件）{
日志（event.target.checked，event.target.name）；
};
render（）{
报税表（MyForm）
看看我
提交
)
};
};
我不确定您为什么要特别使用
ref
来完成，但可以通过本机完成：

从“React”导入React；
函数复选框（）{
const[isSave，setIsSave]=React.useState（false）；
常量处理程序=（值）=>{
console.log（值）；
setIsSave（值）；
};
返回(
处理程序（ev.target.checked）}/>
救救我。。
);
}
导出默认复选框；
不知道为什么这一点被否决。这是一个完全有效的，功能性的受控输入元素的实现。我不知道。答案很好。我不会投反对票，因为答案确实提供了一个解决方案，但我个人觉得它滥用了
值
的用途。如果查看，您会发现它说value属性用于定义复选框提交的值。选中属性用于指示是否选中此项目。我还没有测试过它对屏幕阅读器的影响，但如果这让一些可怜的盲人感到困惑，我也不会感到惊讶。@ivarni，好吧，这取决于程序员给
值
一个合适的值，而不是不合适的值。有一个受控复选框仍然是完全有效的。我只是说我个人会控制
checked
属性，而不是
值，原因我已经概述过了。返回总是未定义的：-（这对我来说很奇怪。我在我的帖子中添加了一张图片，如果可以的话。我很抱歉@Damien Leroux，我在复制你的源代码时犯了一个错误。你的代码是有效的。非常感谢。我工作了！
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>)
    };
};