專案中一個功能 可能在很多地方都有出現 那麼此時我們肯定是要抽成一個元件, 如果此功能中需要傳值呢

我覺得子元件向父元件傳值, 父元件呼叫子元件裡面的事件, 父元件向子元件傳值云云…. 前兩者真的是需要仔細點琢磨
專案有個需求:

需要對編號:中的值進行純數字驗證並且進行搜尋, 此功能有十幾個頁面, 為了防止不寫很多驗證程式碼 打算把編號這個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);
}

這樣就成功了