React 中的 setState：如何创建一个值依赖于另一个变量值的变量

Question

我正在使用 React 构建一个应用程序，该应用程序执行大量计算，并提供来自用户的一些表单输入。我正在寻找创建相当多的变量，每个变量的值将取决于用户的输入。但是，我不确定在使用 setState 定义新变量的值时需要什么语法来识别另一个特定变量的值。

例如，应用程序要求用户将他们的每日合同费率和要求的年度费用输入到表格中。我要进行的第一个计算是粗略估计用户的年总收入，即合同费率乘以 220 个工作日。目前，我更新变量值的函数如下所示：

handleInputChange = (event) => {
    event.preventDefault()
    this.setState({
        rate: event.target.value,
        expenses: event.target.value,
        annualFees: rate.value * 220
    })
}

将值赋给 'annualFees' 的语法显然是不正确的，但它演示了我正在努力实现的目标。有人可以解释正确的代码吗？谢谢

Answer 1

例如这样的东西

    const rate = Number(event.target.value);

    this.setState({
        rate,
        expenses: rate,
        annualFees: rate * 220

编辑：虽然，如果 annualFees 严格绑定到 rate，那么只保留 rate 状态，并在需要时计算 annualFees（所以，用 220 * this.state.rate 替换你所有的 this.state.annualFees，也许写一个类似选择器的函数：annualFees = () => 220 * this.state.rate.

Answer 2

我不确定我是否理解正确。您可以像这样访问状态的实际值：

annualFees: this.state.rate.value * 220 // using the old value of rate

否则你可以这样做:

handleInputChange = (event) => {
    event.preventDefault()
    this.setState({
        rate: event.target.value,
        expenses: event.target.value,
        annualFees: event.target.value * 220
    })
}

Answer 3

您可以在 handleInputChange() 方法中使用 switch 语句。

handleInputChange = event => {
  event.preventDefault();
  switch (event.target.name) {
    case 'rate':
      this.setState({
        rate: event.target.value,
        annualFees: event.target.value * 220
      });
      break;
    case 'expenses':
      this.setState({
        expenses: event.target.value
      });
      break;
    default:
      break;
  }
};

并且您可以像这样解构您的变量：const { name, value } = event.target;就在您的switch语句之上以提高代码的可读性。

注意： 这样您就需要将 name 属性添加到您的 <input /> 标签中。例如

<input
  type="number"
  name="rate"
  value={this.state.rate}
  onChange={e => handleInputChange(e)}
/>

Answer 4

我认为你不应该将 annualFees 存储在状态中，因为根据 React Doc：State 应该是 UI 状态的最小表示。

因此，您可以将 rate 存储在状态中并创建一个函数来计算 annualFees。这样你的状态将是最小的。

handleInputChange = (event) => {
    event.preventDefault()
    this.setState({
        rate: event.target.value,
   })
}

calculateAnnualFees = () => {
 const { rate } = this.state;
 return rate*220;
}

Answer 5

一旦使用 setState 方法的第二个参数更新费率，您能否更新 annualFees 状态变量？

handleInputChange = (event) => {
    event.preventDefault()
    this.setState({
        rate: event.target.value
    }, () => {
        this.setState({
            annualFees: this.state.rate * 220
        })
    })
}

React 中的 setState：如何创建一个值依赖于另一个变量值的变量

setState in React: How to create a variable the value for which is dependent on another variable's value

javascript

setstate

reactjs