时间戳

首页 > 解决方案 > 在数字输入旁边反应显示百分比，反之亦然

javascript - 在数字输入旁边反应显示百分比，反之亦然

问题描述

我正在编写一个包含房屋总成本的组件。有一个美元首付和百分比首付的输入。当用户键入一个数字时，我想在输入的位置显示百分比，如果该人键入百分比，则相同。

只是为了说明它看起来像这样：

总成本：200,000 首付：0 美元，百分比：0%

所以我们将百分比更改为 5%，首付自动显示为 10,000 美元 - 你明白了。

我目前正在获取输入的值，如下所示：

handleStateChange = (e) => {
        const { target: { name, value } } = e
        this.setState({ [name]: value })
    }

输入内部：

name="downPayment" value={ this.state.value } onChange={this.handleStateChange}

编写函数的最佳和有效方法是什么，例如。handlePercentageChange() 在两个方向上都这样做？

标签： javascriptreactjs

解决方案

handleInputChange = (e) => {
  const { target: { name, value } } = e
  this.setState({ [name]: value })

  switch(name) {

    case 'downPaymentPercent' :
      const newAmount = value/100 * this.state.fullPrice // Assuming fullPrice set in state
      this.setState({ downPaymentAmount: newAmount })
      break
    case 'downPaymentAmount' :
      const newPercent = (value * 100) / this.state.fullPrice
      this.setState({ downPaymentPercent: newPercent })
      break
    default:
      break
  }
}


 // The 2 inputs
 name="downPaymentAmount" value={ this.state.downPaymentAmount } onChange={this.handleInputChange}
 name="downPaymentPercent" value={ this.state.downPaymentPercent } onChange={this.handleInputChange}

推荐阅读