React.js는 체크박스 상태를 변경할 수 없습니다.

React.js는 체크박스 상태를 변경할 수 없습니다.

이 간단한 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} />

여기 오는 다른 사람들을 위해서.지금 바로 대응:defaultChecked:

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

이는 구글에서 "React Component not updating"에 대한 상위 히트작 중 하나이기 때문에 답변은 잘 받아들여졌지만 오해의 소지가 있다고 생각합니다.

그checkbox타입은 필요 없습니다.onChange답변이 올라온 후 변경되었는지 모르겠습니다(React의 현재 버전은 v15 - 2016-04-20).

onChange 핸들러 없이 동작하는 다음 예를 참조하십시오(JSB 참조).입력:

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

또 다른 측면 노트(비슷한 질문에 대한 많은 답변)는 단순히 "기본 확인"을 권장하지만, 이것은 효과가 있지만, 보통 어중간한 조치입니다.

언급URL : https://stackoverflow.com/questions/28478945/react-js-cant-change-checkbox-state