在 React 中使用 ref 获取复选框的值 [英] Get the value of checkbox using ref in React

问题描述

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

var MyForm = React.createClass({保存:函数(){控制台日志(this.refs.check_me.value)；},渲染:函数(){返回 <div><h1>MyForm</h1><div className="复选框"><标签><input type="checkbox" ref="check_me"/>对我进行检查

<button className="btn btn-default" onClick={this.save}>提交</button>

}});

解决方案

对于复选框，使用checked"而不是value":

var MyForm = React.createClass({保存:函数(){控制台日志(this.refs.check_me.checked)；},渲染:函数(){返回 <div><h1>MyForm</h1><div className="复选框"><标签><input type="checkbox" ref="check_me"/>对我进行检查

<button className="btn btn-default" onClick={this.save}>提交</button>

}});

结果:

is there any way to get value of checkbox using ref in React. Normal way return always value "on" to me.

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

解决方案

For checkbox, use "checked" instead of "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>
  }
});

As a result:

这篇关于在 React 中使用 ref 获取复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！