[英]React.js can't change checkbox state
我創建了這個簡單的待辦事項列表,當我想選中復選框時,我不能。
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} />
這是 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” - 盡管這有效,但通常是一半的措施。
只是為了其他人來這里。 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.