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

IT技术 reactjs
2021-03-25 13:48:07

有没有办法在 React 中使用 ref 获取复选框的值。正常的方式返回总是值“打开”给我。

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>
    }
});
4个回答

对于复选框,使用“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>
  }
});

因此:

在此处输入图片说明

返回始终未定义:-(
2021-06-16 13:48:07
非常抱歉@Damien Leroux 我在复制您的源代码时犯了一个错误。您的代码有效。非常感谢。我工作!
2021-06-18 13:48:07
这很奇怪,它对我有用。如果有帮助,我在帖子中添加了图片
2021-06-19 13:48:07

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

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

您可以通过侦听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. 虽然这两种解决方案都有效。

@ivarni,好吧,由程序员提供value适当的值而不是没有的值。拥有受控复选框仍然是完全有效的。
2021-05-27 13:48:07
我不会反对,因为答案确实提供了解决方案,但我个人认为它滥用了value应该使用的内容。如果您查看mdn,您会看到它说值属性用于定义复选框提交的值。Checked 属性用于指示此项是否被选中我还没有测试过它会如何影响屏幕阅读器,但如果这会让一些可怜的盲人感到困惑,我也不会感到惊讶。
2021-05-30 13:48:07
我不知道。答案是好的。
2021-05-31 13:48:07
不知道为什么这被否决了。这是受控输入元素的完全有效的功能实现。
2021-06-13 13:48:07
我只是说我个人会控制checked属性,而不是value出于我已经概述的原因。
2021-06-17 13:48:07

我不确定你为什么要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;