react 父子组件传值(兄弟传值)

react中父子组件传值

父向子： 父组件通过自定义属性向子组件传值，子组件通过this.props.属性名接收
子向父： 子组件通过调用父组件以props传入的方法来更改父组件的数据

父向子传值

<Jack value={value} list={list} ></Jack>

//子组件接收  let {value,list}=this.props 就可以正常调用

子向父传值

 //1.子组件通过事件触发函数
 <div><input className="input" placeholder={value}
 onChange={this.changevalue.bind(this)}  
 ></input></div>

//2.子组件可通过props向父组件函数传值
 changevalue(e){
        let newval=e.target.value
        this.props.changevalue(newval)
    }

//3.父组件通过监听子组件调用函数
let {value,list}=this.state
        return(
            <Fragment>
           <Jack value={value} list={list} 
changevalue={this.changevalue}></Jack>
               <Box></Box>
            </Fragment>
)

4.父组件调用函数接收到子组件传来的值 就能改变数据
changevalue=(newval)=>{
        console.log(newval);
        this.setState({
            value:newval
        })
    }