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

您正在调用错误的函数，给孩子打电话model = VGG19(weights='imagenet',include_top=False) model.trainable=False x = Flatten(name='flat')(model) x = Dense(512, activation='relu', name='fc1')(x) x = Dense(512, activation='relu', name='fc2')(x) x = Dense(10, activation='softmax', name='predictions')(x)。和将父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;

您必须使用与传递给子级prop组件的Generate相同的名称。希望这会有所帮助。

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

4 个答案: