在React中將子組件的值傳遞給父組件

Question

好的，我正在開發第二個React應用程序。 在這個項目中，我嘗試使用嵌套組件（我的最后一個組件只有1個組件）。 我已經嘗試在主App組件中渲染一個Button組件，它是一個計算器（這是我在節點/本地復制的我的設計： https : //codepen.io/ryanmdoyle/pen/QBvjdw ）

到目前為止，在我的代碼中，到目前為止，我實際上真正實現的唯一按鈕是AC按鈕。 其他所有內容都來自我的Codepen設計中的復制/粘貼。 我知道CSS類和值之類的某些方面可以正確傳遞，因為它可以正確顯示CSS，但是我正在嘗試獲取Button組件的值並在App組件的方法中使用它。 特別是在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;

Answer 1

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

您試圖添加一個不是Button本地的功能。

為了使用它，您需要傳遞這樣的功能

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

當您嘗試使用Button的功能時，請像這樣使用它

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

有一點要記住this是null默認情況下一個箭頭的功能。

您必須知道，無論何時嘗試創建無狀態或有狀態對其功能集都無所謂的組件，變量都必須分開。 您不能像在這種情況下嘗試的那樣使用它。 React中的class幾乎就像其他編程語言中的class一樣。

Answer 2

當前，在您的Button組件中：

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

未定義this.handleInput 。 它是在您的App組件中定義的，而不是在Button中定義的。 如果嘗試單擊按鈕，則控制台中將出現錯誤。

您要做的是通過props從App組件向Button組件傳遞回調：

在應用程式中：

<Button handleInput={this.handleInput} />

在按鈕中：

<button onClick={props.handleInput}

Answer 3

將這些行替換為您的代碼

按鈕組件

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

像這樣在所有按鈕組件中傳遞道具

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

Answer 4

請記住，您可以將整個函數作為道具傳遞給組件，這就是JavaScript和React的美！ 因此，從本質上講，編寫函數以清除主App組件中的屏幕，然后將引用向下傳遞給按鈕組件。 將該函數附加到按鈕組件的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} />

...

Answer 5

您需要將功能作為道具傳遞到子組件，然后允許您更改父組件的功能。

例如：

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} ... />

然后在Button.js或子組件所在的任何位置：

this.prop.passfunction(someValueToParent)