Javascript React.js可以'；不能更改复选框状态

我创建了这个简单的待办事项列表，当我想勾选复选框时，我不能

import React from 'react';

const TodoItem = React.createClass({

  render() {
    return (
      <div>

        <span>{this.props.todo}</span>
        <input type="checkbox" checked={this.props.done} />

      </div>
    );
  }

});

export default TodoItem;

从“React”导入React；
const TodoItem=React.createClass({
render（）{
返回(
{this.props.todo}
);
}
});
将默认值导出到doitem；

家长：

import React from 'react';
import TodoItem from './TodoItem';
import AddTodo from './AddTodo';

const TodoList = React.createClass({

  getInitialState() {
    return {
      todos: [{
        todo: 'some text',
        done:false
      },{
        todo: 'some text2',
        done:false
      },
      {
        todo: 'some text3',
        done:true
      }]
    };
  },

   addTodo (childComponent) {
    var todoText = childComponent.refs.todoText.getDOMNode().value;
    var todo = {
      todo: todoText,
      done:false
    };
    var todos = this.state.todos.concat([todo]);
    this.setState({
      todos:todos
    });

    childComponent.refs.todoText.getDOMNode().value = '';
  },

  render() {

    var Todos = this.state.todos.map(function(todo) {
      return (
           <TodoItem todo={todo.todo} done={todo.done} />
        )
    });

    return (
      <div>
       {Todos}
       <AddTodo addTodo={this.addTodo}/>
      </div>

    );
  }

});

export default TodoList;

从“React”导入React；
从“/TodoItem”导入TodoItem；
从“/AddTodo”导入AddTodo；
const TodoList=React.createClass({
getInitialState（）{
返回{
待办事项：[{
todo:'一些文本'，
完成：错误
},{
todo:“一些文本2”，
完成：错误
},
{
todo:“一些文本3”，
完成：对
}]
};
},
addTodo（子组件）{
var todoText=childComponent.refs.todoText.getDOMNode（）.value；
变量todo={
todo:todoText，
完成：错误
};
var todos=this.state.todos.concat（[todo]）；
这是我的国家({
待办事项：待办事项
});
childComponent.refs.todoText.getDOMNode（）。值=“”；
},
render（）{
var Todos=this.state.Todos.map（函数（todo）{
返回(
)
});
返回(
{Todos}
);
}
});
将默认值导出到列表；

当您没有在输入上指定

onChange

处理程序时，React会将输入字段呈现为只读

getInitialState() {
    return {
        done: false
    };
}

及

---

这是谷歌“React Component not Updated”（反应组件不更新）的热门话题之一，因此，尽管答案已被广泛接受，但我认为这可能会误导用户

复选框

类型不需要

onChange

。我不确定自发布答案后，这是否发生了变化（React的当前版本为v15-2016-04-20）

请参阅以下示例，说明它在没有onChange处理程序的情况下工作（请参阅）：

类Checky扩展了React.Component{
render（）{
返回（）；
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={checked:true}；
}
render（）{
返回(

);
}
}
React.render（，document.body）；

---

另一个旁注——许多答案（对于类似的问题）只是建议使用“defaultChecked”——虽然这是有效的，但通常是半个度量

只为来这里的其他人。React now提供了

defaultChecked

：

{restChildren}

Buy为什么我必须这样做？我不需要onChange处理程序，我需要在这个处理程序中写什么？你需要它，因为React需要一个。这就是所谓的受控或非受控输入。在这里阅读为什么，我已经测试了这个方法，但它不适用于我的代码。我正在使用Material UI中的复选框组件。@CasperLI没有任何代码来显示任何人都无法帮助您调试。创建一个JSbin或JSFIDLE来显示错误的用例，或者发布一个新问题：）您不需要onChange处理程序。不提供不会使字段成为“只读”的。上面的答案表明，如果没有“OnChanged”处理程序，复选框将被呈现为只读。当我单击您的JSBin时，我看到的正是这种行为：当我单击复选框本身（而不是链接）时，选中状态不会发生任何变化。这是你的期望吗？是的。我的观点是，使其成为可编辑（非只读）组件并不需要“onChange”。如何触发状态更改（通过复选框onClick/onChange由您决定）将“checked”更改为“defaultChecked”为我解决了问题。谢谢！

<input type="checkbox" checked={this.state.done || this.props.done } onChange={this.onChange} />

class Checky extends React.Component {
    render() {
      return (<input type="checkbox" checked={this.props.checked} />);
    }
}

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { checked: true };
    }

    render() {
        return (
          <div>
            <a href="#" onClick={ () => { this.setState({ checked: !this.state.checked }); }}>Toggle</a>
            <hr />
            <Checky checked={this.state.checked} />
          </div>
        );
    }
}


React.render(<App />, document.body);