Javascript 仅在第二次onClick事件后才更改React组件道具

我最近学习了react，我正在尝试创建一个计算器作为自己的学习练习

其目的是，每当我点击一个数字按钮，该值就会出现在输入组件中。到目前为止，我已经实现了这一点，但该值仅在第二个onClick事件中更改

当前，val1道具在第一次单击时从输入中消失，然后在第二次单击时以上一个按钮值重新出现

任何关于我的代码结构的提示都是非常受欢迎的，任何关于我的计算器构建的指导也将是非常好的。我对这一点还很陌生

下面是我的代码：

app.js

import React, {Component} from 'react';
import InputField from './Components/InputField';
import Numbers from './Components/Numbers';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0,
            val1: 0,
            val2: 0
        }
    }
    numberChange(num1, num2){
        this.setState({val1: num1});
    }
    render() {
        return (
            <div className="App">
                <InputField val1={this.state.val1} value={this.state.number || ''} onChange={this.numberChange.bind(this)} />
                <Numbers onChange={this.numberChange.bind(this)} />
            </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“./Components/InputField”导入InputField；
从“./组件/编号”导入编号；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
编号:0，
val1:0，
val2:0
}
}
数字变化（num1，num2）{
this.setState（{val1:num1}）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

InputField.js

import React, {Component} from 'react';

class InputField extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0
        }
    }
    onChange(e) {
        console.log('onChange event fired');
        this.setState({
            number: e.target.value
        })
        this.props.onChange(this.state.number);
        console.log(this.state.number);
    }
    render() {
        return (
            <div className="inputField">
                <input type="number" value={this.props.val1 || ''} onChange={this.onChange.bind(this)}/>
            </div>
        );
    }
}

export default InputField;

import React，{Component}来自'React'；
类InputField扩展组件{
建造师（道具）{
超级（道具）；
此.state={
编号：0
}
}
onChange（e）{
log（'onChange事件已激发'）；
这是我的国家({
编号：e.target.value
})
this.props.onChange（this.state.number）；
console.log（this.state.number）；
}
render（）{
返回(
);
}
}
导出默认输入字段；

Numbers.js

import React, {Component} from 'react';
import {Button} from 'react-bootstrap'

class Numbers extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number: props.value
        }
    }
    number(e) {
        console.log('You\'ve pressed number ' + e.target.value);
        this.setState({
            number: e.target.value
        })
        this.props.onChange(this.state.number);
    }
    render() {
        return (
            <div className="buttons">
                <Button bsStyle="primary" value="1" onClick={this.number.bind(this)}>1</Button>
                <Button bsStyle="primary" value="2" onClick={this.number.bind(this)}>2</Button>
                <Button bsStyle="primary" value="3" onClick={this.number.bind(this)}>3</Button>
                <Button bsStyle="primary" value="4" onClick={this.number.bind(this)}>4</Button>
                <Button bsStyle="primary" value="5" onClick={this.number.bind(this)}>5</Button>
                <Button bsStyle="primary" value="6" onClick={this.number.bind(this)}>6</Button>
                <Button bsStyle="primary" value="7" onClick={this.number.bind(this)}>7</Button>
                <Button bsStyle="primary" value="8" onClick={this.number.bind(this)}>8</Button>
                <Button bsStyle="primary" value="9" onClick={this.number.bind(this)}>9</Button>
            </div>
        );
    }
}

export default Numbers;

import React，{Component}来自'React'；
从“react bootstrap”导入{Button}
类号扩展组件{
建造师（道具）{
超级（道具）；
此.state={
编号：props.value
}
}
编号（e）{
log（'您已按下数字'+e.target.value'）；
这是我的国家({
编号：e.target.value
})
this.props.onChange（this.state.number）；
}
render（）{
返回(
1.
2.
3.
4.
5.
6.
7.
8.
9
);
}
}
导出默认数字；

---

任何帮助都将不胜感激

setState是一个异步函数，这意味着只有在调用onChange回调函数后，数据才会更新。因此，应用程序组件仍然获取旧值

this.state.number

在设置状态完成后，通过以下方式尝试调用onChange函数：

number(e) {
    console.log('You\'ve pressed number ' + e.target.value);
    this.setState({
        number: e.target.value
    }, () => {
        this.props.onChange(this.state.number);
    })
}

---

this.setState是异步的，然后this.props.onChange（this.state.number）；在状态真正更改之前调用，因此state.number具有旧值，您应该执行以下操作：

this.props.onChange（e.target.value）

顺便说一下，您可以将其添加到构造函数中：
this.number=this.number.bind（this）
，因此您可以这样做（注意，我们刚刚编写了：'this.number'）：

1
2.
3.
4.
5.
6.
7.
8.
9

更好的是，你可以这样做，而不是重复自己9次：

render() {
        let buttons = []
        for(var i =1; i <10; i++)
           buttons.push(<Button bsStyle="primary" value={i} onClick={this.number}>{i}</Button>)
        return (
            <div className="buttons">
                {buttons}
            </div>
        );
    }

render（）{
让按钮=[]
对于（var i=1；i
  <Button bsStyle="primary" value="1" onClick={this.number}>1</Button>
  <Button bsStyle="primary" value="2" onClick={this.number}>2</Button>
  <Button bsStyle="primary" value="3" onClick={this.number}>3</Button>
  <Button bsStyle="primary" value="4" onClick={this.number}>4</Button>
  <Button bsStyle="primary" value="5" onClick={this.number}>5</Button>
  <Button bsStyle="primary" value="6" onClick={this.number}>6</Button>
  <Button bsStyle="primary" value="7" onClick={this.number}>7</Button>
  <Button bsStyle="primary" value="8" onClick={this.number}>8</Button>
  <Button bsStyle="primary" value="9" onClick={this.number}>9</Button>

render() {
        let buttons = []
        for(var i =1; i <10; i++)
           buttons.push(<Button bsStyle="primary" value={i} onClick={this.number}>{i}</Button>)
        return (
            <div className="buttons">
                {buttons}
            </div>
        );
    }