React.js nie może zmienić stanu pola wyboru

Question

Stworzyłem tę prostą listę TODO, a kiedy chcę zaznaczyć pole wyboru, nie mogę.

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; 

Rodzic:

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; 

Answer 1

Kiedy nie określił onChange obsługi na twoje wejścia React odda pole wprowadzania jako tylko do odczytu.

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

i

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

Answer 2

Jest to jeden z najlepszych trafień w Google „React składnik nie odnowienia”, więc mimo że odpowiedź została dobrze przyjęta, myślę, że to może być mylące.

Typ checkbox nie wymaga onChange. Nie jestem pewien, czy to się zmieniło od czasu opublikowania odpowiedzi (obecna wersja React to v15 - 2016-04-20).

Zobacz poniższy przykład z nim pracować bez obsługi onChange (patrz 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); 

Kolejna dygresja - wiele odpowiedzi (podobnych pytań) po prostu zalecane „defaultChecked” - chociaż to działa, zazwyczaj jest to połowa.