React Checkbox không gửi onChange

TLDR: Sử dụng defaultChecked thay vì jsbin hoạt động, đã kiểm tra .

Cố gắng thiết lập một hộp kiểm đơn giản sẽ gạch bỏ văn bản nhãn của nó khi được chọn. Vì một số lý do, handChange không bị sa thải khi tôi sử dụng thành phần này. Bất cứ ai có thể giải thích những gì tôi đang làm sai?

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

Sử dụng:

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

Giải pháp:

Việc sử dụng đã chọn không để giá trị cơ bản thay đổi (rõ ràng) và do đó không gọi trình xử lý onChange. Chuyển sang defaultChecked dường như để khắc phục điều này:

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

Để có được trạng thái kiểm tra của hộp kiểm của bạn, đường dẫn sẽ là:

this.refs.complete.state.checked

Cách khác là lấy nó từ sự kiện được truyền vào handleChangephương thức:

event.target.checked

Tốt hơn là không sử dụng ref trong những trường hợp như vậy. Sử dụng:

<input
    type="checkbox"
    checked={this.state.active}
    onClick={this.handleClick}
/>

Có một số tùy chọn:

checked đấu với defaultChecked

Cái trước sẽ đáp ứng với cả những thay đổi của nhà nước và nhấp chuột. Sau này sẽ bỏ qua những thay đổi trạng thái.

onClick đấu với onChange

Các cựu sẽ luôn kích hoạt trên các nhấp chuột. Cái sau sẽ không kích hoạt khi nhấp nếu checkedthuộc tính có mặt trên inputphần tử.

Trong kịch bản bạn KHÔNG muốn sử dụng trình xử lý onChange trên DOM đầu vào, bạn có thể sử dụng thuộc onClicktính thay thế. Điều defaultCheckedkiện có thể để lại trạng thái cố định cho 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>
        )
    }
 }

Tôi hy vọng điều này sẽ giúp ai đó trong tương lai.

Nếu bạn có một handleChangechức năng trông như thế này:

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value,
  });
}

Bạn có thể tạo một onChangechức năng tùy chỉnh để nó hoạt động như một kiểu nhập văn bản:

<input
  type="checkbox"
  name="check"
  checked={this.state.check}
  onChange={(e) => {
    this.handleChange({
      target: {
        name: e.target.name,
        value: e.target.checked,
      },
    });
  }}
/>

Trong trường hợp ai đó đang tìm kiếm một trình xử lý sự kiện phổ quát, đoạn mã sau có thể được sử dụng nhiều hơn hoặc ít hơn (giả sử rằng thuộc tính tên được đặt cho mỗi đầu vào):

    this.handleInputChange = (e) => {
        item[e.target.name] = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    }

onChange sẽ không gọi handleChange trên thiết bị di động khi sử dụng defaultChecked. Để thay thế, bạn có thể sử dụng onClick và onTouchEnd.

<input onClick={this.handleChange} onTouchEnd={this.handleChange} type="checkbox" defaultChecked={!!this.state.complete} />;

Trong tài liệu ui, trạng thái của hộp kiểm có thể được tìm nạp là

this.refs.complete.state.switched