React.js不能更改复选框状态

• Z时代
• 2024-01-10
• 分类：问答

我创建了这个简单的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;

回答：

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

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

和

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

以上是 React.js不能更改复选框状态 的全部内容， 来源链接： utcz.com/qa/401360.html