javascript - 无法使用 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 更改复选框状态。

这是一个fiddle

Answer 1

通过提供 defaultChecked 而不是 checked 您正在创建 uncontrolled component . Uncontrolled 表示你不能通过改变defaultChecked来控制它。 要从代码中更改复选框的状态，您需要为其提供 checked。

这是更新的 fiddle :http://jsfiddle.net/p4ps7nob/

要考虑的另一件事是:Props in getInitialState Is an Anti-Pattern