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

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

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;语句的上方{em>解构变量，以提高代码的可读性。

注意：：您需要将 name 属性添加到switch标签中。例如

<input />

Answer 2

我认为您不应该将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;
}

Answer 3

例如这样的东西

    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。

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

Answer 5

使用setState方法的第二个参数更新费率后，是否可以更新AnnualFees状态变量？

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

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

5 个答案: