React.js 无法更改复选框状态答案

【问题标题】：React.js can't change checkbox stateReact.js 无法更改复选框状态
【发布时间】：2015-04-13 06:37:07
【问题描述】：

我创建了这个简单的 TODO 列表，但当我想选中复选框时却不能。

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;

父母：

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;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当你没有在你的输入中指定 onChange 处理程序时，React 会将输入字段呈现为只读。

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

和

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

【讨论】：

购买为什么我必须这样做？我不需要 onChange 处理程序，我需要在这个处理程序中写什么？
你确实需要它，因为 React 需要它。这就是所谓的受控或非受控输入。在这里阅读原因，facebook.github.io/react/docs/forms.html
我已经测试过这个方法，但它不适用于我的代码。我正在使用 Material UI 中的 Checkbox 组件。
@CasperLI 没有任何代码可以显示任何人都无法帮助您调试。创建一个 JSbin 或 JSfiddle 来显示您的错误用例或发布一个新问题 :)
您不需要 onChange 处理程序。不提供不会使该字段“只读”。

【解决方案2】：

这是 Google 上“React 组件未更新”的热门话题之一，因此尽管答案已被广泛接受，但我认为这可能会产生误导。

checkbox 类型不需要onChange。我不确定自从发布答案后这是否发生了变化（当前版本的 React 是 v15 - 2016-04-20）。

请参阅以下不使用 onChange 处理程序的示例（请参阅JSBIN）：

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

另一个附注 - 很多答案（类似问题）只是推荐“defaultChecked” - 虽然这有效，但通常是一半的措施。

【讨论】：

上述答案表明，如果没有“OnChanged”处理程序，复选框将呈现为只读。当我单击您的 JSBin 时，这就是我看到的确切行为：当我单击复选框本身（而不是链接）时，选中状态没有任何反应。这是你的期望吗？
是的。我的观点是“onChange”不需要使其成为可编辑（非只读）组件。您如何触发该状态更改（通过复选框 onClick / onChange 取决于您

【解决方案3】：

只为其他来这里的人。 React 现在提供defaultChecked:

<label htmlFor={id}>
  <input
    id={id}
    type="checkbox"
    defaultChecked={input.props.checked}
    // disabled={input.props.disabled}
  />
  <span className="custom-checkbox"></span>
  {restChildren}
</label>

【讨论】：

将“checked”更改为“defaultChecked”为我解决了这个问题。谢谢！