如何在 Javascript react/material ui 中添加用户输入和输出

Question

我正在做一个项目，需要它在 react js 和材料 UI 中。我想知道如何实现下面的代码以适应我需要的格式，这只是一个 js 文件。

//js file

function calculate(){
var input1Value = document.getElementById('input1').value;
var input2Value = document.getElementById('input2').value;
  
var output1 = parseInt(input1Value) * 4.5;
document.getElementById('output1').value = output1;
  
var output2 = parseInt(output1) + parseInt(input2Value);
document.getElementById('output2').value = output2;
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//.HTML file

Input1 : <input type="text" id="input1" value="25000" />
Input2 : <input type="text" id="input2" value="30000" />
<button onClick="calculate();">Calculate</button>

Output1 : <input type="text" id="output1" />
Output2 : <input type="text" id="output2" />

Answer 1

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        input1: 25000,
        input2: 30000,
        output1: '',
        output2: ''
    };

    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.calculate = this.calculate.bind(this);
  }

  handleChange1(event) {
    this.setState({input1: event.target.value});
  }

  handleChange2(event) {
    this.setState({input2: event.target.value});
  }

  calculate(event) {
    this.setState({
        output1: parseInt(this.state.input1) * 4.5,
        output2: parseInt(this.state.output1) + parseInt(this.state.input2)
    });
  }

  render() {
    return (
        Input1 : <input type="text" id="input1" value="{this.state.input1}"  onChange={this.handleChange1}/>
        Input2 : <input type="text" id="input2" value="{this.state.input2}"  onChange={this.handleChange2}/>
        <button onClick="{this.calculate}">Calculate</button>

        Output1 : <input type="text" id="{this.state.output1}" />
        Output2 : <input type="text" id="{this.state.output2}" />
    );
  }
}