Question

我是编程新手，想学习React。目前，国家的概念令我非常困惑。在下面的代码中，我试图编写一个简单的应用程序，要求用户输入数字1，然后保存该数字，然后输入数字2，也保存该数字，然后最后显示总数。我只能在输入字段中输入一个数字。我不知道要在输入字段中输入什么值。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Random extends Component {
  state = {
    numberOne: '',
    numberTwo: '',
    message: 'Enter number One',
    showTotal: ''
  };

  AddNumbersInTheTextField_one = event => {
    this.setState({
      numberOne: parseInt(event.target.value)
    });
  };

  AddNumbersInTheTextField_two = event => {
    this.setState({
      numberTwo: parseInt(event.target.value)
    });
  };

  HandleSaveButton = () => {
    this.setState(
      {
        numberOne: this.state.numberOne,
        numberTwo: this.state.numberTwo
      },
      function() {
        this.setState({
          numberOne: '',
          message: 'Enter number two'
        });
      }
    );
  };

  HandleShowTotalButton = () => {
    this.setState({
      showTotal: this.state.numberOne + this.state.numberTwo,
      message: this.state.showTotal
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <div>
          <input
            value={this.state.numberOne}
            onChange={this.AddNumbersInTheTextField_one}
          />
        </div>
        <div>
          <button onClick={this.HandleSaveButton}>Save Number</button>
          <button onClick={this.HandleShowTotalButton}>Show Total</button>
          <div>{this.state.showTotal}</div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Random />, document.getElementById('root'));

Answer 1

问题在这里：

  HandleSaveButton = () => {
    this.setState(
      {
        // there is no need to set these values because we already have them in state
        numberOne: this.state.numberOne,
        numberTwo: this.state.numberTwo
      },
      function() {
        this.setState({
          // you're setting your numberOne value to ''
          numberOne: '',
          message: 'Enter number two'
        });
      }
    );
  };

通过使输入更改功能具有通用性并将值分配给输入中的name属性，可以使代码变干一点。然后根据状态中的活动字段，使handleSave动态化，从而简化代码。

state = {
  activeField: 'fieldOne',
  fieldOne: '',
  fieldTwo: '',
  total: '',
  message: '',
}
// this will update any shallow inputs in state
handleInputChange(e) {
  const { target: { name, value } } = e;
  this.setState({ [name]: value });
}
handleSave(e) {
  const { activeField, fieldOne, fieldTwo } = this.state; 
  if (activeField == 'fieldOne') {
    this.setState({ 
      activeField: 'fieldTwo',
      message: 'Enter number two.'
    });
  } else if (activeField == 'fieldTwo') {
    // here we basically cut out the logic you have in HandleShowTotalButton,
    // you may show total to handle a boolean value instead and conditionally
    // render the total value after the user clicks it
    this.setState({ total: fieldOne + fieldTwo });
  }
}
// below is just an example of what your input should look like not the literal jsx you'll be using
render() {
  // we use the activeField as a key in state to obtain our activeValue
  const { activeField } = this.state;
  const activeValue = this.state[activeField];
  return (
    // your inputs could look like this with a dynamic name and value
    <input name={activeField} value={activeValue} onChange={this.handleInputChange} />

Answer 2

我能够通过修改代码来解决此问题。谢谢@ fvaldez421的帮助。当我在学习上有所进步时，我一定会使用您的逻辑。

import React, { Component } from 'react'

class Random extends Component {
    state ={
        numberOne: '',
        numberTwo: '',
        inputFieldValue: '',
        message: "Enter number One",
        showTotal: ''
    }

    AddNumbersInTheTextField = (event) =>{
        this.setState({
            inputFieldValue: parseInt(event.target.value)
        })
    }

    HandleSaveButton = () => {
        if(this.state.numberOne === ''){
            this.setState({
            numberOne: this.state.inputFieldValue,
            message: "Enter number Two",
            inputFieldValue: ''
            })
        }
        else if(this.state.numberTwo === ''){
            this.setState({
                numberTwo: this.state.inputFieldValue,
                inputFieldValue: ''
            })
        }
    }

    HandleShowTotalButton = () => {
        this.setState({
            showTotal: (this.state.numberOne + this.state.numberTwo),
        })
    }
    render() {
        return (
            <div>
                {this.state.message}
                <div>
                    <input value={this.state.inputFieldValue} onChange={this.AddNumbersInTheTextField} ></input>
                </div>
                <div>
                    <button onClick={this.HandleSaveButton}>Save Number</button>
                    <button onClick={this.HandleShowTotalButton}>Show Total</button>
                    <div>{this.state.showTotal}</div>
                </div>
            </div>
        )
    }
}
export default Random

ReactJS如何在状态下从一个输入字段保存两个数字

2 个答案: