我想知道为什么具有更改后的值的子组件未在此处呈现。
让孩子处理自己的更改不是更好的主意,还是将控制器放在父级中更好?
class App extends React.Component {
constructor() {
super();
this.state = {
todos: todosData
};
}
render() {
const todoItems = this.state.todos.map(item => (
<TodoItem key={item.id} item={item} />
));
return <div className="todo-list">{todoItems}</div>;
}
}
这是子TodoItem
class TodoItem extends React.Component {
constructor(props) {
super(props);
this.state = {
isComp: {}
};
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
let tempObj = this.state.isComp;
tempObj.completed = !this.state.isComp.completed;
this.setState = { isComp: tempObj };
console.log(this.state.isComp);
}
render() {
this.state.isComp = this.props.item;
console.log(this.state.isComp);
return (
<div className="todo-item">
<input type="checkbox" checked={this.state.isComp.completed} />
<p>{this.props.item.text}</p>
</div>
);
}
}
如您所见,状态已通过handleChange()
进行了更改,但这不会触发渲染。我也不太确定是否可以将另一个对象分配给状态为[let tempObj = thi.state.isComp
)的对象。
我试图实现的功能是选中并取消选中一个框并相应地进行渲染。
这是什么?
this.setState = { isComp: tempObj };
我认为应该是
this.setState({ isComp: tempObj });