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
})
}