前言:react中的数据流动有很好的解决方案:redux,但是redux对于初学者来说学习曲线比较陡,并且在小型项目不太适用,开发维护成本都比较高,所以这里我只说单独用react的情况下组件之间传值的用法,自学的,有不足烦请大神指正。
父组件传递给子组件:
核心思路就是将父组件中的state传递给子组件
父组件代码:
class Father extends React.Component {
constructor(props){
super(props);
// 父组件的state
this.state = {
menu:[]
}
}
componentDidMount() {
// 这里可以发ajax请求 去后端请求数据 通过setState将值保存到自己的state中
// 假定data为后端请求回来的数据
var data = [];
this.setState({
menu: data
})
}
render() {
return (
{this.state.menu.map(function (data) {
return <Children data={data} key={data.key}/>
})}
)
}
}
export default Father;
子组件代码:
class Children extends React.Component {
render(){
// 这里的data就是父组件传递过来的值
var data = this.props.data;
return(
<Col md={ 3 }>
<FormGroup className="p-b">
<label className="input">
// 这里就可以通过将data中的值渲染到子组件中
<input id={data.key} type="text" value={data.value}/>
<em className="fa fa-check"></em>{data.value}
</label>
</FormGroup>
</Col>
)
}
}
以上就是父组件传值给子组件
现在的项目开发过程中,大多数的子组件是需要有一些数据上的操作的,比如input中的输入、checkbox的选中与取消选中等,这样的情况下就需要将子组件的数据回传给父组件,应用redux的话,可以通过store统一管理分发数据,单独用react也是可以实现的
子组件传值给父组件:
总体思路就是父组件与子组件统一管理父组件中的state,父组件将state传递给子组件,子组件通过onChange将数据回传给父组件的state
父组件代码:
class Father extends React.Component {
constructor(props){
super(props);
// 父组件的state
this.state = {
menu:[]
}
}
componentDidMount() {
// 这里可以发ajax请求 去后端请求数据 通过setState将值保存到自己的state中
// 假定data为后端请求回来的数据
var data = [];
this.setState({
menu: data
})
}
// 子组件触发 参数就是子组件回传回来的一些数据
ChildrenFunc(data,value,key){
// 拿到当前组件的state
let menu = this.state.menu;
// 遍历当前state,遍历过程中可以对state中的值进行修改
for(let i = 0; i < menu.length; i++){
if(key == menu[i].key){
menu[i].value = data;
}
};
// 将修改之后的值保存到当前组件的state中
this.setState({
menu: menu
});
}
render() {
return (
{this.state.menu.map(function (data) {
// onUpdata方法就是子组件状态改变时就会调用这个函数,通过这个函数子组件就会触发父组件的ChildrenFunc方法,从而达到修改state的功能
return <Children data={data} key={data.key} onUpdata={(data,value,position) => {$this.ChildrenFunc(data,value,position)}}/>
})}
)
}
}
export default Father;
子组件代码:
class Children extends React.Component {
// 子组件状态改变就会触发父组件传递过来的onUpdata方法,可以进行一系列的传值,比如将输入值传递回去等
ChildrenChange(event,value,position){
this.props.onUpdata(event.target.value,value,position);
}
render(){
// 这里的data就是父组件传递过来的值
var data = this.props.data;
return(
<Col md={ 3 }>
<FormGroup className="p-b">
<label className="input">
// 这里就可以通过将data中的值渲染到子组件中
<input id={data.key} onChange={(event) => {this.ChildrenChange(event,"end",data.key)}} type="text" value={data.value}/>
<em className="fa fa-check"></em>{data.value}
</label>
</FormGroup>
</Col>
)
}
}
以上就是子组件传值给父组件的实现方式,父组件中更进一步操作(例如提交数据)就可以通过自身state中的值来进行提交
例如:
父组件中提交数据:
addData(){
// 获取state
let menu = this.state.menu;
// 遍历state 将我们要的数据取出来
var newArray = [];
for(let i = 0; i < menu.length; i++){
if(menu[i].key == "某些我们需要的值"){
newArray.push(menu[i].value);
}
};
// 提交时的参数
var data = {
id: "xxxx",
menu: newArray.join(",")
}
// 提交的ajax请求代码。。。。。
}
以上是最近学习所得,如有错误烦请指正,不胜感激!