目前的问题是这样的:
一表单父组件,中有多个input输入框,然每一个input输入框是已封装好的组件,现在我的需求是想获取这多个input组件的输入值,并传入表单父组件的state中去。
我知道父组件获取子组件的数据的方式之一可以是父组件传入子组件一个自己的方法,子组件获取值之后再调用父组件传入的方法,把值作为参数传入。
但是现在有多个input子组件,要怎么处理才能把子组件的值同时传入父组件的一个方法中呢?
父组件(之前用的是表单元素input,和textarea,改成封装后的组件就不能正确获取数据了):
class Activity extends React.Component{
constructor(){
super();
this.state={
title : null,
brief : null
};
}
handleChange(){
this.setState({
title : this.refs.title.value,
brief : this.refs.brief.value
});
}
render(){
return(
);
}
};
子组件:
class Input extends React.Component{
render(){
return(
);
};
};
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
组件
方法
各个子组件在输入发生变更的时候,发送change事件
父组件监听change事件,来收集各个子组件的值
父子组件之间通过事件脱耦~
如果只是目前这个应用场景的话,我觉得 @kikong 的做法是比较好的选择。
如果真要在父子组件间传递数据的话,可以用
context属性。官网介绍
一篇blog