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

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

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

需要对编号:中的值进行纯数字验证并且进行搜索, 此功能有十几个页面, 为了防止不写很多验证代码打算把编号这个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); }
这样就成功了