reagieren: get custom checkbox checked-Attribut

Möchte ich also einige Anpassungen-mit checkbox, kann es so Aussehen:

reagieren: get custom checkbox checked-Attribut

also ich wickle meine benutzerdefinierte Kontrollkästchen in einen Reagieren Komponente:

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;

und mein container ist wie folgt:

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;

können Sie sehen, dass ich versuchte, Sie zu binden this.refs.c.checked im onChange Rückruf, aber es funktioniert nicht.

so, wie bekomme ich die checked state meiner benutzerdefinierte Kontrollkästchen in der Test-Komponente in der _handleChange Funktion?

InformationsquelleAutor Littlee | 2016-01-02
  1. 6

    In diesem Fall brauchen Sie nicht verwenden refs da können Sie geprüft die Eigenschaft von e argument

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

    Beispiel

    oder wenn Sie wollen, pass nur checked Eigenschaft, die Sie tun können, es so

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

    Beispiel

    InformationsquelleAutor Alexander T.
Schreibe einen Kommentar