我创建了这个简单的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会将输入字段呈现为只读。
onChange
getInitialState() { return { done: false }; }
和
<input type="checkbox" checked={this.state.done || this.props.done } onChange={this.onChange} />