ReactJS状態の1つの入力フィールドから2つの数値を保存するにはどうすればよいですか？

問題はここにあります：

  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'
        });
      }
    );
  };

入力変更関数をユニバーサルにし、入力の名前属性に値を割り当てることで、コードを少し乾かすことができます。次に、状態のアクティブフィールドに応じて、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} />