
这是我的一个使用场景。
1、在nav1 中的input列表中填写一次值,在nav2~nav5也会自动的把这个nav1的每一个input的值都给其它的nav,有点啰嗦了,也就是只在nav1中填写一次,其它nav都会自动添加。
2、如果需要更改nav1~nav5中input的value值,那么就需要改变nav1传下来的值,这里我不会做了,不管怎么做,都改变不了nav1传下来的值,这个value改变不了。
我在父组件中的constructor中定义了一个数组,用来存放nav1~nav5这5个对象:
constructor(props) {
super(props);
this.state = {
params:[]
}
}
使用了个callback方法:
callback(param,i){
let params = this.state.params;
params[i] = param;
this.setState({
params
});
}
将这个callback方法放在nav1~nav5的子组件上, paramTwo={this.state.params[0]} 作为nav1的值传给nav2~nav5的子组件上:
...
在nav1子组件上,我在constructor中定义了要返回的字符串,并把这些字符串放在一个叫param的对象中:
constructor(props) {
super(props);
this.state = {
param : {
isHiddenNav:null,
navBarColor:null,
navBarTitleColor:null,
navBarTitleFont:null
}
}
}
然后调用父组件的callback方法,调用前,把所有的input的值都取到:
setParam(str,e){
let value = e.target.value;
let param = this.state.param;
param[str] = value;
this.props.callback(param,0);
}
然后给每一个input onChange这个方法并bind(this,str):
在nav2~nav5的子组件上,
同样定义要返回的值,唯一的区别是,在render方法中把传给nav2~nav5的nav1的值取出来,分别给每一个input的value赋值,让它们显示。
同样给每一个input onChange setParam()这个方法并bind(this,str).
现在的问题是:nav2~nav5都可以拿到nav1的值并显示,而却改不了nav1的这个值了,在调试过程中,也确实是改过了,但是重新渲染父组件的state的时候,paramTwo={this.state.params[0]}这里又把原nav1的值重新渲染了,而改过的新的value的值,则不会显示:
请问各位大侠,我该如何操作,即可以传nav1的值到nav2~nav5,又可以改变nav2~nav5的默认值?谢谢!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
首先说下你的代码,有个问题需要说下:
这两个地方都是直接修改了
state,这是非常不推荐的做法,也就是说在你调用setState之前state已经被修改了。然后
从你现在提供的代码来看,不能直接定位你的问题在哪,只能提供你几个点
input值没正确显示,是不是没搞清楚受限input?文档在这里:https://facebook.github.io/react/docs/forms.html#controlled-components
子组件接收父组件
props,然后设置成自己的state,更改了父组件的state后,你的子组件如果需要更新state得使用componentWillReceiveProps这个方法,你是否使用了?