React - 父子通信

React通信

父子通信

父传子 =>属性 props
–应用组件：<Child1 name={12345}/>
– 子组件接收：class中：直接接收 this.props.name
– 子组件接收：函数中： function(props)传入props参数接收

• 子传父 => 方法一：回调函数

  子组件：class Navbar extends Component{
          render(){
              return <div style={{background:"red"}}>
                  navbar-<button onClick={this.handleClick}>click</button>  - 2.定义事件
              </div>
          }
          handleClick = ()=>{                                - 3.事件里获取回调函数并执行
              console.log(this.props.onEvent)
              this.props.onEvent()
          }
      }
      
  父组件：export default class App extends Component {
      state = {
          isShow:true
      }
      render() {
          return (
              <div>
                  App
                  <Navbar onEvent={()=>{                      - 1.组件调用时传入回调函数
                      console.log("App 组件的回调函数")
                      this.setState({
                          isShow:!this.state.isShow
                      })
                  }}/>
                  {
                      this.state.isShow?
                      <Sidebar/>
                      :null
                  }
              </div>
          )
      }
  }
  

• 子传父 - - 方法二：ref 通信

  子组件：class Input extends Component{
          state = {
              mytext:""
          }
          kerwinreset= ()=>{
              this.setState({
                  mytext:""
              })
          }
          render(){
              return <div>
                  <div>other code</div>
                  <input type="text" style={{background:"yellow"}}
                  value={this.state.mytext} onChange={(ev)=>{
                      this.setState({
                          mytext:ev.target.value
                      })
                  }}/>
              </div>
          }
      }
  
  父组件：export default class App extends Component {
          render() {
              return (
                  <div>
                      <Input ref="myinput"/>               -  1.使用子组件时给 ref 赋值
                      <button onClick={this.handleClick}>add</button>
                  </div>
              )
          }
          handleClick = ()=>{
              //拿着值
              console.log(this.refs.myinput.state.mytext)   
              //清空输入框                          -   2.this.refs.name调用子组件的属性和方法
              this.refs.myinput.kerwinreset()
          }
      }