javascript - 通过在 State 中自动计算将数字乘以 10 - React JS

Question

在这个例子中，我希望用户增加或减少输入框中的数字，并且乘以 10 的数字应该在输入框旁边的范围中看到。我无法获取结果。有人可以帮我吗。

片段:

class App extends React.Component {
  state = {
    initialValue: 0,
    finalValue: initialValue* 10
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
        <span>{this.state.finalValue}</span>
    </div>
   )
  }
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
   }

}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Answer 1

在您的代码中，您在对象初始化中执行 finalValue: initialValue* 10 ，这是不正确的，因为没有变量 initialValue 。

回答你的问题。您想要根据您所在州的值显示一些内容。为此，您实际上不需要对象中的 2 个键，因为第二个键始终是其中一个键的 10 倍。

所以不要将其存储在状态中。我在渲染中直接乘以10。 这是有效的，因为每当您更改输入框中的值时，表单都会重新呈现，从而再次调用 render。由于在渲染之前您的 initialValue 已更新，因此您将在跨度内获得 10 倍的值。

class App extends React.Component {
  state = {
    initialValue: 0,
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
        <span>{this.state.initialValue * 10}</span>
    </div>
   )
  }
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
   }

}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>