1-父组件点击changeTab 跟新state里面的值list(数组)
changeTab(el) {
this.setState({
curStatus:el.key ,
list:[...todoList[el.key].list]
})
}
2- list数组给子组件进行渲染
<InputBox list={list} curStatus={curStatus}></InputBox>
3- 子组件拿到list 赋值给todolist 自己保存下来渲染页面
static getDerivedStateFromProps(props, state) {
console.log('props, state' ,props, state);
return {
todoList: [...props.list]
};
}
render () {
const {todoList} = this.state
console.log('todoList' , todoList[0]); //这里的todoList也是更新的
return (
<div>
<div>{this.props.curStatus}</div>
{
//下面就是不跟新
todoList.map(el => {
return (
<div className='dis-flex flex-center input-box focus' key={el.id}>
<Checkbox onChange={(e) => this.onChange(e)} checked={el.isOver} />
<Input placeholder="输入todo " defaultValue={el.name} />
</div>
)
})
}
求解,不知道哪里错了
可以把
defaultValue
换成value
试下,不行的话建议提供一下 codesandbox demo~