Question

React的新手，无法弄清楚如何解决这个问题。我想点击一个组件（Project）并让它改变父级的状态，确定然后渲染的内容。

App组件中的

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>

);
}

项目是从 Project.js 调用的，其中包含：

render(){
    return(
        <div className="third" value={this.props.value} onClick={this.props.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>
    )
}

当我点击第一个控制台显示：

clicked!
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, nativeEvent: MouseEvent, type: "click", target: img.image…}
undefined

由于目标：控制台中显示的img.image，我尝试将该元素赋予相同的值，onClick属性为 div.third ，但这并不起作用。然后我尝试将它提供给Project.js渲染中的所有元素，但这也没有用。

Answer 1

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

<强> App.js

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

<强> Project.js

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

这里_onClick直接使用道具而不是处理事件。您需要使用property initializer syntax for es6类，因为es6类不能自动查找：_onClick = () => {}

Answer 2

您可以将该功能作为道具从父母传递给孩子。 不要忘记使用.bind（this），它在项目中缺少 ...在构造函数级别，或在组件级别使用this.handleClick.bind（this）。你也可以使用_handleClick而不是handleClick（做同样的事情）。

// PARENT
class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'bob' }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    this.setState({
     name : 'anita'
    })
  }

  render() {
    return (
      <div>
      {this.state.name} 
      <Child handleClick={this.handleClick} />
      </div>
    )
  }
}

// CHILD
class Child extends React.Component {
  render() {
    return <button onClick={this.props.handleClick} />
  }
}

React：单击组件以更改父项状态

2 个答案: