inputs - React Checkbox no envía onChange

select checkbox react

Question

TLDR: use defaultChecked en lugar de checked, trabajando jsbin aquí http://jsbin.com/mecimayawe/1/edit?js,output

Intentando configurar una casilla simple que tache el texto de la etiqueta cuando esté marcada. Por alguna razón, handleChange no se dispara cuando uso el componente. ¿Alguien puede explicar lo que estoy haciendo mal?

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    console.log(''handleChange'', this.refs.complete.checked); // Never gets logged
    this.setState({
      complete: this.refs.complete.checked
    });
  },
  render: function(){
    var labelStyle={
      ''text-decoration'': this.state.complete?''line-through'':''''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            checked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

Uso:

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

Solución:

El uso de marcado no permite que el valor subyacente cambie (al parecer) y, por lo tanto, no llama al controlador onChange. Cambiar a defaultChecked parece solucionar esto:

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    this.setState({
      complete: !this.state.complete
    });
  },
  render: function(){
    var labelStyle={
      ''text-decoration'': this.state.complete?''line-through'':''''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            defaultChecked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

Answer 1

En el caso de que no desee usar el controlador onChange en el DOM de entrada, puede usar la propiedad onClick como alternativa. La defaultChecked , la condición puede dejar un estado fijo para v16 IINM.

 class CrossOutCheckbox extends Component {
      constructor(init){
          super(init);
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange({target}){
          if (target.checked){
             target.removeAttribute(''checked'');
             target.parentNode.style.textDecoration = "";
          } else {
             target.setAttribute(''checked'', true);
             target.parentNode.style.textDecoration = "line-through";
          }
      }
      render(){
         return (
            <span>
              <label style={{textDecoration: this.props.complete?"line-through":""}}>
                 <input type="checkbox"
                        onClick={this.handleChange}
                        defaultChecked={this.props.complete}
                  />
              </label>
                {this.props.text}
            </span>
        )
    }
 }

Espero que esto ayude a alguien en el futuro.

Answer 2

En material ui, el estado de la casilla de verificación se puede buscar como

this.refs.complete.state.switched

Answer 3

Para obtener el estado verificado de su casilla, la ruta sería:

this.refs.complete.state.checked

La alternativa es obtenerlo del evento pasado al método handleChange :

event.target.checked