反應：獲取自定義復選框的選中屬性

Question

我想用復選框進行一些自定義，它看起來像這樣：

所以我將我的自定義復選框包裝到 React 組件中：

require('../../less/ck-checkbox.less');
var React = require('react');

var CkCheckbox = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
    text: React.PropTypes.string,
    defaultChecked: React.PropTypes.bool,
    onChange: React.PropTypes.func
  },
  getDefaultProps: function() {
    return {
      name: 'checkbox',
      text: '',
      defaultChecked: false,
      onChange: function () {}
    };
  },
  render: function() {
    return (
      <div className="ck-checkbox">
        <label>
          <input
            type="checkbox"
            name={this.props.name}
            ref="c"
            defaultChecked={this.props.defaultChecked}
            onChange={this.props.onChange.bind(this, this.refs.c.checked)}
          />
            <span className="icons">
              <span className="icon-checked-o icon-true"></span>
              <span className="icon-circle-o icon-false"></span>
            </span>
            {this.props.text.length > 0 ?
              <span className="ck-checkbox-text">{this.props.text}</span> : null
            }
          </label>
        </div>
      );
    }
});

module.exports = CkCheckbox;

我的容器是這樣的：

var React = require('react');

var CkCheckbox = require('./CkCheckbox.js');

var Test = React.createClass({
  render: function() {
    return (
      <div>
        <CkCheckbox onChange={this._handleChange}/>
      </div>
    );
  },

  _handleChange: function(checked, e) {
    console.log(checked)
  }
});

module.exports = Test;

你可以看到，我試圖在onChange回調中綁定this.refs.c.checked ，但它不起作用。

那么，如何在 _handleChange 函數的測試組件中獲取自定義復選框的checked state ？

Answer 1

在這種情況下，您不需要使用refs ，因為您可以從e參數中獲取已檢查的屬性

// CkCheckbox component
 <input type="checkbox" 
     name={this.props.name} 
     defaultChecked={this.props.defaultChecked} 
     onChange={ this.props.onChange } />

// Test component
_handleChange: function(e) {
  var checked = e.target.checked;
  console.log(checked)
}

Example

或者如果你只想傳遞checked的屬性，你可以這樣做

// CkCheckbox component
handleChange: function (e) {
  this.props.onChange(e.target.checked);
},

<input type="checkbox" 
   name={this.props.name} 
   defaultChecked={this.props.defaultChecked} 
   onChange={ this.handleChange } />

// in Test component 
_handleChange: function(checked) {
  console.log(checked)
}

Example

Answer 2

這是一個簡單的示例，您可以使用它來獲取自定義值或您選中的框的值，還可以檢查該框是否被選中。

export default class SearchBoxContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      boxAll: false
    };
  }

  handleChange = event => {
    this.setState({ boxAll: event.target.checked }, () => {
      console.log("This returned true or false", this.state.boxAll);
    });
  };

  render() {
    return (
      <div className="search-container">
        <SearchBox />
        <div className="filter-country">
          <h1>Filter</h1>
          <div className="filter-country-container">
            <div>
              <input
                type="checkbox"
                id="checkBoxUS"
                name="US"
                value="US"
                onChange={this.handleChange}
              />
              <label htmlFor="US">All Jobs</label>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

重要的是要知道，在此示例中，我使用“setState()”回調只是為了演示目的，但您可以通過 props 或您喜歡的任何方法將值傳遞給其他組件。 此外，當復選框被選中時，該值將返回“true”