Question

有没有办法在React中使用ref获取checkbox的值。正常方式总是返回值＆＃34; on＆＃34;对我来说。

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

Answer 1

对于复选框，请使用＆＃34;选中＆＃34;而不是＆＃34;值＆＃34;：

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

结果：

Answer 2

您可以通过聆听onChange并为其指定state来使复选框成为受控元素。请尝试以下方法：

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

每当点击该复选框时，它都会运行toggleCheckboxValue功能，该功能会切换this.state.checkboxValue的值。

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

注意：正如ivarni指出的那样，您可能希望专门为复选框而不是checked控制value值。虽然这两种解决方案都有效。

Answer 3

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

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

Answer 4

我不确定您为什么要特别使用 ref，但它可以自然地完成：

import React from 'react';

function CheckBox() {
  const [isSave, setIsSave] = React.useState(false);
  const handler = (value) => {
    console.log(value);
    setIsSave(value);
  };

  return (
    <div>
      <input type="checkbox" onChange={(ev) => handler(ev.target.checked)} />
      <label> Save me..</label>
    </div>
  );
}

export default CheckBox;

在React中使用ref获取checkbox的值

4 个答案: