Javascript 将值传递给未定义的父组件

我试图将值从childComponent传递到父组件，但未成功

childComponent.js

this.state{(
瓦尔：10
)}
handelClick（）{
设val=this.state.val
this.props.useVal（val）
}
render（）{
返回(
this.handleclick（）}>单击此处
)
}

parentComponent.js

this.state={
parentVal:'
}
useVal（val）{
警报（val）
this.setState（{parentVal:val}）
}
render（）{
返回(
this.useVal}/>
)
}

---

当我运行它时，我得到了未定义的警报。如何正确地将值从子组件传递到父组件？

必须将参数传递给

useVal

prop函数

<ChildComponent useVal={val => this.useVal(val)} />

类ParentComponent扩展了React.Component{ 状态={ parentVal:“ }; useVal=（val）=>{ 警报（val）； this.setState（{parentVal:val}）； } render（）{ 返回； } } 类ChildComponent扩展了React.Component{ 状态={ 瓦尔：10 }; handelClick=（）=>{ 设val=this.state.val； this.props.useVal（val）； } render（）{ 返回点击这里； } } render（，document.getElementById（“根”））

---

您正在使用在函数调用中传递的值。

this.state = {
   parentVal : ''
}

useVal(val){
    alert(val)
   this.setState({parentVal: val})
}


render(){
  return(
   <childComponent useVal={() => this.useVal} />
)
}

<ChildComponent useVal={val => this.useVal(val)} />

class ParentComponent extends React.Component {
  state = {
    parentVal: ""
  };

  useVal = (val) => {
    alert(val);
    this.setState({ parentVal: val });
  }

  render() {
    return <ChildComponent useVal={this.useVal} />;
  }
}