React：親の状態を変更するコンポーネントをクリックしてください

Question

非常に新しい、これを修正する方法を理解することはできません。 コンポーネント（プロジェクト）をクリックして、親の状態を変更して、レンダリングするものを決定します。

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

は、私が最初にクリックした場合：

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、から呼び出されていコンソールショー：

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はthを扱う代わりに直接小道具を使用しますeイベント。 es3クラスは自動バインドされないため、property initializer syntax for 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} /> 
    } 
}