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

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

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

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

---

将值赋给“annualFees”的语法显然是不正确的，但它演示了我试图实现的目标。有人能解释一下正确的代码吗？谢谢。

比如像这样的东西

    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*此.state.rate

例如

    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*此.state.rate

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

---

annualFees:this.state.rate.value*220//使用rate的旧值

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

---

annualFees:this.state.rate.value*220//使用rate的旧值

您可以在

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
  type="number"
  name="rate"
  value={this.state.rate}
  onChange={e => handleInputChange(e)}
/>

handleInputChange（e）}
/>
您可以在
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
  type="number"
  name="rate"
  value={this.state.rate}
  onChange={e => handleInputChange(e)}
/>

handleInputChange（e）}
/>
我认为您不应该将
年费
存储在State中，因为根据：
State
应该是UI状态的最小表示

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

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

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

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

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

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

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

在使用
setState
方法的第二个参数更新速率后，您是否可以更新annualFees状态变量

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

在使用
setState
方法的第二个参数更新速率后，您是否可以更新annualFees状态变量

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

谢谢。我喜欢使用switch语句的想法，这对我想要创建的大多数变量都非常有效，但它似乎会阻止我计算变量，因为这些变量的值是从税率和费用的输入中得出的。例如，如果我想计算总应纳税所得额rate*220-费用。您知道如何实现这一点吗？当然，一个简单的例子是，您可以使用第二个输入字段计算它，然后从
这个.state
中获取另一个。但是，当然，这可能会因您的特定场景而异。谢谢。我喜欢使用switch语句的想法，这对于我想创建的大多数变量，但它似乎会阻止我计算变量，其中值是从税率和费用的输入中得出的。例如，如果我想计算总应纳税所得额，即税率*220-费用。你知道如何实现吗？当然，一个简单的c例如，您可以使用第二个输入字段进行计算，然后从
this.state
中获取另一个字段。当然，这可能与您的特定场景不同。