Reactjs react复选框不能切换

我想我知道发生了什么.

单击按钮，它将切换is_checked，这将选中或取消选中该框.但这最终会触发复选框的onChange，这也会切换状态...你实际上编写了一个无限循环.尽管如此，由于React会对setState个操作进行批处理/go Bounce，所以代码不会锁定页面.

试试这个:

2019年hooks API更新:

import React, { useState } from 'react';

const Component = () => {
  const [isChecked, setIsChecked] = useState(true);

  return (
    <div>
      <input
        type="checkbox"
        onChange={(event) => setIsChecked(event.currentTarget.checked)}
        checked={isChecked}
      />
      <button onClick={() => setIsChecked(!isChecked)}>
        change checkbox state using this button
      </button>
    </div>
  );
};

原件:

var React = require("react");

var Component = React.createClass({
    getInitialState: function() {
        return {
            isChecked: true
        };
    },

    handleCheckboxChange: function(event) {
        console.log("checkbox changed!", event);
        this.setState({isChecked: event.target.checked});
    },

    toggleIsChecked: function() {
        console.log("toggling isChecked value!");
        this.setState({isChecked: !this.state.isChecked});
    },

    handleButtonClick: function(event) {
        console.log("button was pressed!", event);
        this.toggleIsChecked();
    },

    render: function() {
        return (
            <div>
                <input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} />
                <button onClick={this.handleButtonClick}>change checkbox state using this button</button>
            </div>
        );
    }
});

module.exports = Component;

请注意，通过使用React的valueLink，您可以使此代码更加干净(请在此处阅读更多信息:https://facebook.github.io/react/docs/two-way-binding-helpers.html)