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 sortByPosition = (a, b) => a.position - b.position
array.sort(sortByPosition);
array.forEach(({ components_under_section }) => components_under_section.sort(sortByPosition));

您正在尝试添加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。

您必须知道，无论何时尝试创建无状态或有状态无关其功能集的组件，变量都必须分开。您不能像在这种情况下尝试的那样使用它。 React中的类几乎就像其他编程语言中的类一样。

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中定义的。如果尝试单击“按钮”，则会在控制台中出现错误。

您要执行的操作是通过道具从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)

在React

5 个答案: