javascript - Pass value of child component to parent component in React

Question

Ok, working on my second ever React app. In this project, I am trying to use nested components (my last one just had 1 component). I've got a Button component that I am trying to render within the main App component, which is a calculator (Here is my design I am replicating in node/react locally: https://codepen.io/ryanmdoyle/pen/QBvjdw)

So far in my code, the only button I am actually implementing so far is the AC button. Everything else is copy/paste from my codepen design. I know some aspects like the CSS classes and values are getting passed around correctly because it displays the CSS properly, but I am trying to take the value of the Button component and use that within methods in the App component. Particularly in the handleInput method. I know with an input field you can get the event.target.value but that's obviously not working!

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;

标签： javascriptreactjs

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 中的类几乎就像其他编程语言中的类一样。