javascript - React 中将子组件的值传递给父组件

Question

好的，正在开发我的第二个 React 应用程序。在这个项目中，我尝试使用嵌套组件(我的最后一个只有 1 个组件)。我有一个按钮组件，我试图在主应用程序组件中渲染它，它是一个计算器(这是我在本地节点/ react 中复制的设计: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 中的类几乎就像其他编程语言中的类一样。