反应重置按钮清除文本输入区域，javascript

Question

以下是我的按钮，我一直试图清除所有文字输入，最后一个是ButtonNumber number="R"。我的想法是，我可以从该按钮再次调用constructor() - 这将重置我的状态，并且基本上执行重置按钮的任务 - 但是，情况并非如此，您可以在结束那里：

import React, { Component, PropTypes } from 'react';
import ButtonNumber from './ButtonNumber.js'

export default class ButtonNumberContainer extends Component {
  render() {
    return(
      <div className="numbers">
        <div className="btn-number-container">
          <ButtonNumber number="0" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="1" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="2" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="3" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="4" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="5" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="6" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="7" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="8" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="9" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="R" addLogicToEquation={this.props.constructor()} ></ButtonNumber>
        </div>
      </div>
    )
  }
}

应用程序前端如下所示：

这里有一些代码可以为按钮指定功能 - 也许我需要定义某种类型的＆＃34;清除＆＃34;功能并从这里的某个地方调用它：

import React, { Component } from 'react';

export default class ButtonEquation extends Component {
  render() {
    const { equation, addLogicToEquation, evalEquation } = this.props
    const equationClass = "btn btn-equation-" + equation

    return (
      <button className={equationClass} onClick={() => {evalEquation ? evalEquation() : addLogicToEquation(equation)}}>
        {equation}
      </button>
    )
  }
}

完整的代码库lives here。

修改

此档案：

import React, { Component, PropTypes } from 'react';
import ButtonNumber from './ButtonNumber.js'

export default class ButtonNumberContainer extends Component {
  render() {
    return(
      <div className="numbers">
        <div className="btn-number-container">
          <ButtonNumber number="0" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="1" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="2" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="3" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="4" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="5" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="6" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="7" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="8" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="9" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="R" clearTheForm={this.props.clearTheForm} ></ButtonNumber>
        </div>
      </div>
    )
  }
}

还有这个：

    import React, { Component, PropTypes } from 'react';

    export default class ButtonNumber extends Component {
      render() {
        const { number, addLogicToEquation, evalEquation, clearTheForm } = this.props
        const numberClass = " btn btn-number-" + number

        return (
          //<button className={numberClass} onClick={() => {addLogicToEquation(number)}}>
          <button className={numberClass} onClick={() => {clearTheForm ? clearTheForm() : addLogicToEquation(number)}}>
            {number}
          </button>
        )
      }
    }

在应用程序的主要逻辑中，尝试重置状态：

    class App extends Component {
      constructor() {
        super()
        this.state = {
          equation: 0,
        }

        this.addLogicToEquation = this.addLogicToEquation.bind(this)
        this.evalEquation = this.evalEquation.bind(this)
      }

clearTheForm(){
    this.state = {
    equation: 0,
  }
}

这个函数的调用是关于什么的。

Answer 1

在App

中清除已渲染数字的功能

clearTheForm() {
  this.setState({equation: "0"})
}

在ButtonNumberContainer中，请记住bind

<ButtonNumber number="R" clearTheForm={this.props.clearTheForm.bind(this)} ></ButtonNumber>

在ButtonNumber中，您的功能存在于this.props。

中

<button className={numberClass} onClick={() => {this.props.clearTheForm ? this.props.clearTheForm() : this.props.addLogicToEquation(number)}}>

Answer 2

我认为，您需要的是setState功能。要更新state并在render时重新运行clearTheForm功能。像这样。

clearTheForm(){
    this.setState({
      equation: 0
    });
}

希望得到这个帮助。

修改
您还需要将clearTheForm方法作为道具发送给ButtonNumberContainer 像这样。

class App extends Component {
      constructor() {
        super()
        this.state = {
          equation: 0,
        }

        this.addLogicToEquation = this.addLogicToEquation.bind(this)
        this.evalEquation = this.evalEquation.bind(this)
        this.clearTheForm = this.clearTheForm.bind(this)
      }

      clearTheForm(){
          this.setState({
            equation: 0
          });
      }

      addLogicToEquation(newLogic) {
          ...
      }

      evalEquation() {
          ...
      }

      render() {
        return (
          <div className="App">
            <Result text={this.state.equation}/>
            <ButtonNumberContainer addLogicToEquation={this.addLogicToEquation} clearTheForm={this.clearTheForm} />
            <ButtonEquationContainer addLogicToEquation={this.addLogicToEquation}
                                     evalEquation={this.evalEquation}/>
          </div>
        );
      }
    }