Question

我在asp.net core 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个主要选项，
简单的解决方案，但被认为是不良做法 有点复杂，但被认为是良好做法。

简单的解决方案：
使用currying将id的参数传递给处理程序：
这是不好的做法，因为它将创建一个新的函数实例在每个渲染上，当您在每个渲染上传递新道具时可能会导致性能问题，这可能会中断diffing algorithm of react。

＆＃13;

   
   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"));

＆＃13;

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

＆＃13;

更好的解决方案：
使用组件处理id并将其向上传递给处理程序这是一个很好的做法，因为您正在使用组件组合，它可以让您重用代码，测试它并更好地维护和调试它，而且当您在每个渲染上创建新实例时，您不会遇到性能问题。

＆＃13;

   
   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"));

＆＃13;

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

＆＃13;

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

在Asp.net核心2.0上的React中进行父级通信

2 个答案: