組件按鈕調用父級中的函數

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相同的名稱。 希望這可以幫助。