子组件向父组件传值(事件发生在子组件中)和事件

项目中一个功能 可能在很多地方都有出现 那么此时我们肯定是要抽成一个组件, 如果此功能中需要传值呢

我觉得子组件向父组件传值, 父组件调用子组件里面的事件, 父组件向子组件传值云云…. 前两者真的是需要仔细点琢磨
项目有个需求:

需要对编号:中的值进行纯数字验证并且进行搜索, 此功能有十几个页面, 为了防止不写很多验证代码 打算把编号这个input框 和对它的验证放在一个文件中 .

高级搜索下面那一坨已经写成一个组件,此牵扯到父组件向子组件传值, 只是把界面样式写成一个 , 但是事件还是写在各个的父组件中,这种父组件向子组件传值和事件使用的是props , 这种没什么可说的.

主要的是解决上述需求

父组件

子组件

首先搜索功能的话 搜索按钮在父组件中, 编号这个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)
    }

记得给子组件 绑定一个onRef属性
子组件js需要添加

componentDidMount() {
this.props.onRef(this);
}

这样就成功了