React on Asp.netコア2.0の子どもと親のコミュニケーション

Question

私は問題を抱えているasp.netコア2.0にReactアプリ（ReactJsではない）を持っています。私は親と通信する必要のある子コンポーネントを持っています。具体的には、子コンポーネントのボタンをクリックすると、その子コンポーネントを親にリレーする必要があります。

export class Buttons extends React.Component<any, any> { 

    buttonClick(idx) { 
    //I would like to notify parent component here 
    //that Button (idx) was clicked 
    return idx 
    } 

    public render() { 
    return <div> 
     <button onClick={this.buttonClick}>Button 1</button> 
     <button onClick={this.buttonClick}>Button 2</button> 
     <button onClick={this.buttonClick}>Button 3</button> 
     <button onClick={this.buttonClick}>Button 4</button> 
    </div>; 
    } 
} 

親コンポーネント：

export class Home extends React.Component<RouteComponentProps<{}>, {}> { 

    ... 
    handler(idx) { 
    //need idx here 
    } 

    return <div> 
     {content} 
     <h1>Buttons</h1> 
     <Buttons buttonClick={this.handler} /> 
    </div>; 
} 

Answer 1

あなたはここに2つの主要なオプション、
簡単な解決策が、consiを持っています悪い習慣を信じてください。
もう少し複雑だが、考えられる良い練習。

• 簡単な解決策：ハンドラにidのパラメータを渡すためにカリー化
  使用：
  それはどのかもしれない、それぞれのレンダリングに機能 の新しいインスタンスを作成しますので、これは悪い習慣です各レンダリングで新しい小道具を渡すとパフォーマンスの問題が発生し、diffing algorithm of reactが中断される可能性があります。

  
   
      class Buttons extends React.Component { 
   
      constructor(props) { 
   
       super(props); 
   
      
   
       this.buttonClick = this.buttonClick.bind(this); 
   
      } 
   
       
   
      buttonClick(idx) { 
   
       const that = this; 
   
       return function (e) { 
   
       that.props.buttonClick(idx); 
   
       } 
   
      } 
   
      
   
      render() { 
   
       return <div> 
   
       <button onClick={this.buttonClick(1)}>Button 1</button> 
   
       <button onClick={this.buttonClick(2)}>Button 2</button> 
   
       <button onClick={this.buttonClick(3)}>Button 3</button> 
   
       <button onClick={this.buttonClick(4)}>Button 4</button> 
   
       </div>; 
   
      } 
   
      } 
   
      
   
      
   
      class App extends React.Component { 
   
      constructor(props) { 
   
       super(props); 
   
       this.state = {}; 
   
      
   
       this.handler = this.handler.bind(this); 
   
      } 
   
      
   
      handler(idx) { 
   
       console.log(idx); 
   
      } 
   
      
   
      render() { 
   
       return (
   
       <div> 
   
        <h1>Buttons</h1> 
   
        <Buttons buttonClick={this.handler} /> 
   
       </div> 
   
       ); 
   
      } 
   
      } 
   
      
   
      ReactDOM.render(<App />, document.getElementById("root")); 
   
      
   
  

  
   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
   
      <div id="root"></div> 
   
      
   
  

• よりよい解決策：
  idを処理し、ハンドラに上向きにそれを渡すためにコンポーネントを使用します。
  これは、コードを再利用し、テストし、維持管理し、デバッグできるコンポーネントコンポジションを使用している場合と、各レンダリングで新しいインスタンスを作成するときにパフォーマンスの問題がない場合と同様に優れた方法です。

  
   
      class MyButton extends React.Component{ 
   
      constructor(props) { 
   
       super(props); 
   
      
   
       this.buttonClick = this.buttonClick.bind(this); 
   
      } 
   
      buttonClick(idx) { 
   
       this.props.buttonClick(this.props.buttonId); 
   
      } 
   
      
   
      render(){ 
   
       return(
   
       <button onClick={this.buttonClick}>{this.props.children}</button> 
   
       ); 
   
      } 
   
      } 
   
      
   
      class Buttons extends React.Component { 
   
      
   
      render() { 
   
       return <div> 
   
       <MyButton buttonClick={this.props.buttonClick} buttonId={1}>Button 1</MyButton> 
   
       <MyButton buttonClick={this.props.buttonClick} buttonId={2}>Button 2</MyButton> 
   
       <MyButton buttonClick={this.props.buttonClick} buttonId={3}>Button 3</MyButton> 
   
       <MyButton buttonClick={this.props.buttonClick} buttonId={4}>Button 4</MyButton> 
   
       </div>; 
   
      } 
   
      } 
   
      
   
      
   
      class App extends React.Component { 
   
      constructor(props) { 
   
       super(props); 
   
       this.state = {}; 
   
      
   
       this.handler = this.handler.bind(this); 
   
      } 
   
      
   
      handler(idx) { 
   
       console.log(idx); 
   
      } 
   
      
   
      render() { 
   
       return (
   
       <div> 
   
        <h1>Buttons</h1> 
   
        <Buttons buttonClick={this.handler} /> 
   
       </div> 
   
       ); 
   
      } 
   
      } 
   
      
   
      ReactDOM.render(<App />, document.getElementById("root")); 
   
      
   
  

  
   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
   
      <div id="root"></div> 
   
      
   
  

Answer 2

あなたの子コンポーネントでこれをやって試してみてください。ここ

子コンポーネントは...私は持っているが、私はかなりそれを動作させることができないものです。

export default class Buttons extends React.Component { 

    buttonClick = (idx) => { 
    this.props.buttonClick(idx); 
    } 

    public render() { 
    return <div> 
     <button onClick={this.buttonClick(1)}>Button 1</button> 
     <button onClick={this.buttonClick(2)}>Button 2</button> 
     <button onClick={this.buttonClick(3)}>Button 3</button> 
     <button onClick={this.buttonClick(4)}>Button 4</button> 
    </div>; 
    } 
}