Question

你好，我正在学习 reactjs ，我有问题。

我有两个输入，一个处理收入，另一个处理结果。我想动态计算余额（income - outcome），而无需提交按钮。

我的代码的问题是，当我在输入中添加值时，我必须在结果末尾添加一个空格以获取并计算余额。这是我的代码。

import React, { Component } from 'react';

class Form extends Component {
    constructor(props){
        super(props);
        this.state={
            income:0,
            outcome:0,
            balance:0
        }
    this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e){
        this.setState({[e.target.name]: e.target.value});
        this.setState({balance: this.state.income - this.state.outcome});
    }
    render() {
        return (
            <div className="form">
                <form method="">
                    <label htmlFor="income">income </label>
                    <input name="income" type="text" onChange={this.handleChange}></input>
                    <label htmlFor="outcome">outcome </label>
                    <input name="outcome" type="text" onChange={this.handleChange}></input>
                </form>

                <h6>income: {this.state.income}</h6>
                <h6>outcome: {this.state.outcome}</h6>
                <h6>balance: {this.state.balance}</h6>
            </div>
        );
    }
}

export default Form;

Answer 1

setState函数为sometime asynchronous function。因此，在使用setState函数之后，U应该使用回调函数。

handleChange(e){
   this.setState({[e.target.name]: e.target.value}, function() {
       this.setState({balance: this.state.income - this.state.outcome});
   });
}

e.target.value的类型为字符串，当减法时可能有一些问题。但是使用javascript没关系

Answer 2

尝试使用不同的onChange方法，

import React, {
  Component
} from 'react';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      income: 0,
      outcome: 0,
      balance: 0
    }
    this.handleInComeChange = this.handleInComeChange.bind(this);
    this.handleOutComeChange = this.handleOutComeChange.bind(this);
  }

  handleInComeChange(e) {
    this.setState({
      income: e.target.value
    },() => {
    this.setState({
      balance: this.state.income - this.state.outcome
    });
    });
  }
  
  handleOutComeChange(e) {
    this.setState({
      outcome: e.target.value
    },() =>{
    this.setState({
      balance: this.state.income - this.state.outcome
    });
    });
  }

  render() {
    return ( <
      div className = "form" >
      <
      form method = "" >
      <
      label htmlFor = "income" > income < /label> <
      input name = "income"
      type = "text"
      onChange = {
        this.handleInComeChange
      } > < /input> <
      label htmlFor = "outcome" > outcome < /label> <
      input name = "outcome"
      type = "text"
      onChange = {
        this.handleOutComeChange
      } > < /input> <
      /form>

      <
      h6 > income: {
        this.state.income
      } < /h6> <
      h6 > outcome: {
        this.state.outcome
      } < /h6> <
      h6 onClick = {
        this.calculation
      } > balance: {
        this.state.balance
      } < /h6> <
      /div>
    );
  }
}

export default Form;

ReactJs为平衡项目减去两个输入

2 个答案: