Reactjs 反应：单击组件以更改父状态

很新的反应，不太明白如何解决这个问题。 我想单击一个组件（项目），并让它更改父级的状态，从而确定随后渲染的内容

App.js在应用程序组件中

constructor(props){
  super(props);
  this.state = {
    load: ''
  }
}

handleClick(e){
  this.setState({load: e.target.value});
  console.log("Clicked!");
  console.log(e);
  console.log(e.target.value);
}

display(load){
  if (load === 'bmi') {
    return <Bmi />
  }
  else return "";
}

render() {
    return (
      <div className="App">

      <div className="App-header">

        <h2>Projects</h2>

      </div>
      <div className="box">
        <Project projectName="BMI Calculator"
           projectDescription="A simple React program, using sliders to select weight and height to calculate BMI."
           imgAddress="https://cdn.vertex42.com/ExcelTemplates/Images/bmi-chart.gif"
           value="bmi"
           onClick={this.handleClick}/>

        <Project projectName="..."
           projectDescription="..."

        <Project projectName="Something Else"
           projectDescription="Describing that other thing that I did." />
      </div>
      <div className={this.state.item}>
        {this.display(this.state.item)}
      </div>

  </div>

);
}

由于控制台中显示的target:img.image，我尝试给该元素赋予相同的值，onClick properties为div.third，但没有成功。

---

然后，我尝试将其分配给Project.js渲染中的所有元素，但这也不起作用。

如果在子组件中创建中间单击处理程序，则可以直接使用这些道具：

App.js

handleClick (value) {
  console.log('clicked', value);
  this.setState({load: value});
}

_onClick = () => {
  this.props.onClick(this.props.value);
}

render() {
  return (
    <div className="third" onClick={this._onClick}>
      <h3>{this.props.projectName}</h3>
      <div className="container">
        <img src={this.props.imgAddress} className="image" />
        <div className="middle">
          <div className="text">{this.props.projectDescription}</div>
        </div>
      </div>
    </div>
  );
}

Project.js

handleClick (value) {
  console.log('clicked', value);
  this.setState({load: value});
}

_onClick = () => {
  this.props.onClick(this.props.value);
}

render() {
  return (
    <div className="third" onClick={this._onClick}>
      <h3>{this.props.projectName}</h3>
      <div className="container">
        <img src={this.props.imgAddress} className="image" />
        <div className="middle">
          <div className="text">{this.props.projectDescription}</div>
        </div>
      </div>
    </div>
  );
}

\u onClick=（）=>{
this.props.onClick（this.props.value）；
}
render（）{
返回(
{this.props.projectName}
{this.props.projectDescription}
);
}

---

这里

\u onClick

直接使用道具，而不是处理事件。您将需要使用这些类，因为es6类不会自动绑定：

\u onClick=（）=>{}

如果在子组件中创建中间单击处理程序，则可以直接使用道具：

App.js

handleClick (value) {
  console.log('clicked', value);
  this.setState({load: value});
}

_onClick = () => {
  this.props.onClick(this.props.value);
}

render() {
  return (
    <div className="third" onClick={this._onClick}>
      <h3>{this.props.projectName}</h3>
      <div className="container">
        <img src={this.props.imgAddress} className="image" />
        <div className="middle">
          <div className="text">{this.props.projectDescription}</div>
        </div>
      </div>
    </div>
  );
}

Project.js

handleClick (value) {
  console.log('clicked', value);
  this.setState({load: value});
}

_onClick = () => {
  this.props.onClick(this.props.value);
}

render() {
  return (
    <div className="third" onClick={this._onClick}>
      <h3>{this.props.projectName}</h3>
      <div className="container">
        <img src={this.props.imgAddress} className="image" />
        <div className="middle">
          <div className="text">{this.props.projectDescription}</div>
        </div>
      </div>
    </div>
  );
}

\u onClick=（）=>{
this.props.onClick（this.props.value）；
}
render（）{
返回(
{this.props.projectName}
{this.props.projectDescription}
);
}

---

这里

\u onClick

直接使用道具，而不是处理事件。您将需要使用这些类，因为es6类不会自动绑定：

\u onClick=（）=>{}

您可以将函数作为道具从父级传递给子级别忘了使用.bind（此），它在您的项目中丢失了。。。在构造函数级别，或者在组件级别使用this.handleClick.bind（this）。您也可以使用_handleClick代替handleClick（执行相同的操作）

//父对象
类父类扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={name:'bob'}
this.handleClick=this.handleClick.bind（this）
}
handleClick（e）{
e、 预防默认值（）
这是我的国家({
姓名：“安妮塔”
})
}
render（）{
返回(
{this.state.name}
)
}
}
//孩子
子类扩展了React.Component{
render（）{
返回
}
}

您可以将函数作为道具从父对象传递给子对象别忘了使用.bind（此），它在您的项目中丢失了。。。在构造函数级别，或者在组件级别使用this.handleClick.bind（this）。您也可以使用_handleClick代替handleClick（执行相同的操作）

//父对象
类父类扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={name:'bob'}
this.handleClick=this.handleClick.bind（this）
}
handleClick（e）{
e、 预防默认值（）
这是我的国家({
姓名：“安妮塔”
})
}
render（）{
返回(
{this.state.name}
)
}
}
//孩子
子类扩展了React.Component{
render（）{
返回
}
}

成功了！多谢了，是他干的！谢谢