使用setState无法动态更改复选框的状态

Question

下面是一个简单的React组件，初始复选框状态为false。

我正在尝试使用setState()动态更改它，但不起作用。

这是我的代码：

        var Hello = React.createClass({
            getInitialState: function(){
                return {
                    checked : this.props.checked.toString() === "false" ? false : true
                };
            },
            render: function() {
            console.log("rendering==");
                return <div><input type = "checkbox" defaultChecked = {this.state.checked}/></div>;
            }
        });

        var compRef = React.render(<Hello checked = "false" />, document.body);

   Trying to change state after rendering the component

        setTimeout(function(){
        compRef.setState({checked: true})
        },3000);

我无法使用setState更改复选框的状态。

这里有一个演示

- Softwareddy

Answer 1

提供defaultChecked而不是checked会创建一个不受控制的组件。不受控制意味着您无法通过更改defaultChecked来控制它。 要从代码更改复选框的状态，需要为其提供checked。 这是更新后的fiddle：http://jsfiddle.net/p4ps7nob/ 另一个需要考虑的问题是：getInitialState中的Props是反模式。

- max taldykin

Answer 2

如果您想切换复选框输入的状态，需要使用checked和onChange处理程序来代替使用defaultChecked。

- PhilVarg