组件按钮调用父级中的函数

Question

我有这个父组件：

import React from "react";
import ReactDOM from "react-dom";
import "./App.css";
import Instructions from "./components/instructions/instructions";
import Generate from "./components/button/button";
import View from "./components/view/view";

export class Generator extends React.Component {
    constructor () {
        super()
        this.state = { 
        onView: '0' 
      }  
    }
      btnClick() {
      var x = Math.ceil(Math.ceil(Math.random()) / Math.random());
      console.log(x);
     }

  render() {

  return (
    <div className="container">
    <Instructions />
    <Generate currentClick={this.btnClick}/>
    <View show={this.state.onView}/>
    </div>
    );
  }
}

export default Generator;

我有这个子组件：

import React from "react";

class Generate extends React.Component {
    constructor(props) {
        super(props)
        }

        handleClick = () => {
            this.props.btnClick();
        }

    render() {

    return (
        <div className="gen-box">
        <button 
        type="button" 
        className="gen-btn" 
        onClick={this.handleClick}>
        generate 
        </button>
        </div>
        );
    }
}

export default Generate;

现在，我希望每次单击按钮组件时，都会激活父组件中的一个函数以生成一个随机数。 我这里的代码没有像我预期的那样工作，是我出错了吗？

Answer 1

您正在使用道具名称currentClick公开该函数。 就像您将函数分配给currentClick 。

你可以这样使用。

import React from "react";
class Generate extends React.Component {
  constructor(props) {
    super(props)
  }
  handleClick = () => {
    this.props.currentClick();
  }
  render() {
    return (
      <div className="gen-box">
        <button
          type="button"
          className="gen-btn"
          onClick={this.handleClick}>
          generate
        </button>
      </div>
    );
  }
}
export default Generate;

或者直接在onclick中调用该函数。

import React from "react";
class Generate extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="gen-box">
        <button
          type="button"
          className="gen-btn"
          onClick={this.props.currentClick}>
          generate
        </button>
      </div>
    );
  }
}
export default Generate;

Answer 2

你调用了一个错误的函数，调用this.props.currentClick(); 从孩子。 并将父 btnClick 函数设为窄函数或绑定它，然后将该随机值设置为 state，之后您每次单击子按钮时都可以看到随机数。

Answer 3

您的子组件 onClick 函数假设是这样的。

  handleClick = () => {
        this.props.currentClick();
    }

从父母你发送道具作为

 <Generate currentClick={this.btnClick}/>

其中currentClcik是假设在子组件中调用的道具，而不是btnClick

Answer 4

您必须使用callback函数作为子组件的prop ，如下所示：

发电机：

import React from "react";
import ReactDOM from "react-dom";
import "./App.css";
import Instructions from "./components/instructions/instructions";
import Generate from "./components/button/button";
import View from "./components/view/view";

export class Generator extends React.Component {
    constructor () {
        super()
        this.state = { 
          onView: '0' 
        }  
    }

    btnClick() {
      var x = Math.ceil(Math.ceil(Math.random()) / Math.random());
      console.log(x);
    }

  render() {
  return (
    <div className="container">
    <Instructions />
    <Generate currentClick={this.btnClick}/>
    <View show={this.state.onView}/>
    </div>
    );
  }
}

export default Generator;

产生：

import React from "react";

class Generate extends React.Component {
    constructor(props) {
        super(props)
        }

        handleClick = () => {
            this.props.currentClick();
        }

    render() {

    return (
        <div className="gen-box">
        <button 
        type="button" 
        className="gen-btn" 
        onClick={this.handleClick}>
        generate 
        </button>
        </div>
        );
    }
}

export default Generate;

您必须使用与传递给 Children Generate组件的prop相同的名称。 希望这可以帮助。