项目中一个功能 可能在很多地方都有出现 那么此时我们肯定是要抽成一个组件, 如果此功能中需要传值呢
我觉得子组件向父组件传值, 父组件调用子组件里面的事件, 父组件向子组件传值云云.... 前两者真的是需要仔细点琢磨
项目有个需求:
需要对编号:中的值进行纯数字验证并且进行搜索, 此功能有十几个页面, 为了防止不写很多验证代码 打算把编号这个input框 和对它的验证放在一个文件中 .
高级搜索下面那一坨已经写成一个组件,此牵扯到父组件向子组件传值, 只是把界面样式写成一个 , 但是事件还是写在各个的父组件中,这种父组件向子组件传值和事件使用的是props , 这种没什么可说的.
主要的是解决上述需求
image.png
父组件
image.png
子组件
image.png
首先搜索功能的话 搜索按钮在父组件中, 编号这个input框在子组件中 , 点击搜索要对input中的值进行搜索 , 这就牵扯到了子组件向父组件传值
子组件向父组件传值
首先在父组件js中引用的子组件上面写个属性
<Children changeValue={this.changeValue}/>
子组件js中对该属性进行操作
// input中的onChange事件,用于改变input中的值
onChangeValue = (e) => {
this.setState({
value: e.target.value,
});
//用传过来的changeValue属性(props)，是个函数，呼叫它把e.target.value交给父组件中的函数去处理
this.props.changeValue(e.target.value)
}
render() {
return (
<Input
placeholder="请输入"
onChange={this.onChangeValue}
value={this.state.value}
/>
)
}
然后父组件js中 子组件的属性方法中
// 给子组件 用来穿value的值 用的方法
changeValue = (value) => {
this.setState({
inputValue: value,
})
}
此时拿到的 inputValue的值就是
然后调用onSearchValue的方法就可以实现搜索的功能, 子组件向父组件传值也实现了.
下面就是验证, 验证的功能又牵扯了父组件调用子组件的方法这一功能
父组件调用子组件的方法
看上面代码 子组件js中有个纯数字校验的方法, 现在要在点击搜索的时候也要调用此方法.即为父组件调用子组件
父组件js中
onRef = (ref) => {
this.child = ref;
}
onSearchValue = () => {
if (!this.child.checkNum()) {
return;
}
console.log(this.state.inputValue)
}
记得给子组件<Children> 绑定一个onRef属性
子组件js需要添加
componentDidMount() {
this.props.onRef(this);
}
这样就成功了
