Javascript 在React中将子组件的值传递给父组件

好的，正在开发我的第二个React应用程序。在这个项目中，我尝试使用嵌套组件（我的上一个组件只有1个）。我尝试在主应用程序组件中呈现一个按钮组件，它是一个计算器（这是我在node/react local中复制的设计：）

到目前为止，在我的代码中，我实际实现的唯一按钮是AC按钮。其他一切都是复制/粘贴我的代码笔设计。我知道像CSS类和值这样的一些方面得到了正确的传递，因为它正确地显示了CSS，但我正在尝试获取按钮组件的值，并在应用程序组件的方法中使用它。尤其是在handleInput方法中。我知道使用输入字段可以获得event.target.value，但这显然不起作用

import React, { Component } from 'react';
// import './App.css';

const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={this.handleInput}>{props.value}</button>

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resultDisplay: "",
      entryDisplay: "",
    }
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(event) {
    console.log(event.target.value);
    this.setState({
      entryDisplay: this.state.entryDisplay + event.target.value
    })
  }


  render() {
    return (
      <div className="grid-container">
        <div className="display">display</div>

        <Button id="clear" class={`button button-secondary`} value="ac" />

        <div id="plus-min" className="button button-secondary">+/-</div>
        <div id="percent" className="button button-secondary">%</div>

        <Button id="one" class="button button-primary" value={1} />

        <div id="two" className="button button-primary">2</div>
        <div id="three" className="button button-primary">3</div>
        <div id="four" className="button button-primary">4</div>
        <div id="five" className="button button-primary">5</div>
        <div id="six" className="button button-primary">6</div>
        <div id="seven" className="button button-primary">7</div>
        <div id="eight" className="button button-primary">8</div>
        <div id="nine" className="button button-primary">9</div>
        <div id="zero" className="button-primary">0</div>
        <div id="divide" className="button button-operator">/</div>
        <div id="multiply" className="button button-operator">*</div>
        <div id="subtract" className="button button-operator">-</div>
        <div id="add" className="button button-operator">+</div>
        <div id="decimal" className="button button-primary">.</div>
        <div id="equals" className="button button-operator">=</div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
//导入“/App.css”；
常量按钮=（props）=>{props.value}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
结果显示：“”，
入口显示器：“，
}
this.handleInput=this.handleInput.bind（this）；
}
handleInput（事件）{
日志（event.target.value）；
这是我的国家({
entryDisplay:this.state.entryDisplay+event.target.value
})
}
render（）{
返回(
显示
+/-
%
2.
3.
4.
5.
6.
7.
8.
9
0
/
*
-
+
.
=
);
}
}
导出默认应用程序；

当您尝试使用

按钮中的函数时，请像这样使用它

<Button id="clear" class={`button button-secondary`} value="ac" click={this.handleInput}/>

const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={() => props.click()}>{props.value}</button>

const按钮=（props）=>props.click（）}>{props.value}

要记住的一点是，默认情况下，箭头函数中的
为空

您必须知道，当您试图创建一个无状态或有状态的组件时，它的函数集并不重要，变量必须是独立的。你不能像在这种情况下那样使用它。
React中的类几乎和其他编程语言中的类一样

当您尝试使用
按钮中的函数时，请像这样使用它

<Button id="clear" class={`button button-secondary`} value="ac" click={this.handleInput}/>

const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={() => props.click()}>{props.value}</button>

const按钮=（props）=>props.click（）}>{props.value}

要记住的一点是，默认情况下，箭头函数中的
为空

您必须知道，当您试图创建一个无状态或有状态的组件时，它的函数集并不重要，变量必须是独立的。你不能像在这种情况下那样使用它。
React中的类几乎与其他编程语言中的类一样。
请记住，您可以将整个函数作为道具传递给组件，这就是JavaScript和React的美妙之处！因此，本质上，在主应用程序组件中编写清除屏幕的函数，然后将引用传递给按钮组件。将函数附加到按钮组件的onClick事件

// App.js

...

clearScreen() => this.setState({ resultDisplay: '', entryDisplay: ''})

...


<Button id="clear" class={`button button-secondary`} value="ac" onClick={clearScreen.bind(this)} />


// ButtonComponent.js

...

<button onClick={this.props.onClick} />

...

//App.js
...
clearScreen（）=>此.setState（{resultDisplay:''，entryDisplay:''}）
...
//ButtonComponent.js
...
...
请记住，您可以将整个函数作为道具传递给组件，这就是JavaScript和React的美妙之处！因此，本质上，在主应用程序组件中编写清除屏幕的函数，然后将引用传递给按钮组件。将函数附加到按钮组件的onClick事件

// App.js

...

clearScreen() => this.setState({ resultDisplay: '', entryDisplay: ''})

...


<Button id="clear" class={`button button-secondary`} value="ac" onClick={clearScreen.bind(this)} />


// ButtonComponent.js

...

<button onClick={this.props.onClick} />

...

//App.js
...
clearScreen（）=>此.setState（{resultDisplay:''，entryDisplay:''}）
...
//ButtonComponent.js
...
...
当前，在按钮组件中：

const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={this.handleInput}>{props.value}</button>

const按钮=（props）=>{props.value}

此.handleInput未定义。它在应用程序组件中定义，但不在按钮中定义。如果您尝试单击该按钮，控制台中将出现错误

您要做的是通过道具从应用程序组件向按钮组件传递回调：

应用程序内：

<Button handleInput={this.handleInput} />



在按钮中：

<button onClick={props.handleInput}

当前，在按钮组件中：

const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={this.handleInput}>{props.value}</button>

const按钮=（props）=>{props.value}

此.handleInput未定义。它在应用程序组件中定义，但不在按钮中定义。如果您尝试单击该按钮，控制台中将出现错误

您要做的是通过道具从应用程序组件向按钮组件传递回调：

应用程序内：

<Button handleInput={this.handleInput} />



在按钮中：

<button onClick={props.handleInput}

替换代码中的这些行

按钮组件

    const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={props.onClick}>{props.value}</button> 

const按钮=（props）=>{props.value}

像这样在所有按钮组件中传递道具

<Button id="clear" class='button button-secondary' value="ac" onClick={this.handleInput}/>

在代码中替换这些行

按钮组件

    const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={props.onClick}>{props.value}</button> 

const按钮=（props）=>{props.value}

像这样在所有按钮组件中传递道具

<Button id="clear" class='button button-secondary' value="ac" onClick={this.handleInput}/>

您需要将一个函数作为支撑传递给您的子组件，这将允许您更改父组件的功能

例如：

passFunction(value) {
   // Modify passed parameter (value) from child and implement in parent
   this.setState({value: value});

   // or call that method that you want to call.
   handleInput(value);
}
<Button passFunction={this.passFunction} ... />

您需要将一个函数作为支撑传递给您的子组件，这将允许您更改父组件的功能

例如：

passFunction(value) {
   // Modify passed parameter (value) from child and implement in parent
   this.setState({value: value});

   // or call that method that you want to call.
   handleInput(value);
}
<Button passFunction={this.passFunction} ... />

好的，这是有道理的。我现在在我的应用程序render中有：
组件是：
const Button=（props）=>{props.value}
我将应用程序组件中的handleClick方法更改为console.log out“value”。我想让它做onClick，但它只是记录在渲染中。因此，render上的控制台只显示“1”。为什么该方法在没有单击按钮的情况下运行@勒穆维@Gurpreet-Singh@Ryan因为当您将this.handleInput（1）作为props传递时，实际上是在调用该函数并将其返回值作为prop传递！您需要做的是将这个.handleInput（1）替换为如下回调：（）=>this.handleInput（1），它将传递一个函数