React中的setState：如何创建一个变量，其值取决于另一个变量的值答案

【问题标题】：setState in React: How to create a variable the value for which is dependent on another variable's valueReact中的setState：如何创建一个变量，其值取决于另一个变量的值
【发布时间】：2019-12-02 13:18:09
【问题描述】：

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

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

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

将值分配给“annualFees”的语法显然是不正确的，但它展示了我想要实现的目标。有人可以解释正确的代码吗？谢谢。

【问题讨论】：

标签： javascript reactjs setstate

【解决方案1】：

在使用 setState 方法的第二个参数更新费率后，您能否像这样更新年费率状态变量？

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

【讨论】：

【解决方案2】：

您可以在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)}
/>

【讨论】：

谢谢。我喜欢使用 switch 语句的想法，这对于我想要创建的大多数变量都非常有效，但它看起来好像会阻止我计算值来自输入的变量 rate 和花费。例如，如果我想计算总应税收入，即税率 * 220 - 费用。您知道如何实现这一目标吗？
当然，一个简单的情况是您使用 second 输入字段计算它并从this.state 获取另一个。但是，当然，这可能会因您的特定情况而有所不同。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

比如这样的

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

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

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

【讨论】：