反应多个文本输入控制彼此状态

Question

Working CodeSandbox Demo

所以我正在学习使用React，并试图创建一个货币兑换应用程序。 我根据您实际使用的输入，从多个输入中了解如何malloc时遇到问题。

我设置了一个CodePen来向您展示我想要做的事情。

我知道或不知道的事情：

1. 现在我只更新setState州。

2. 如果我使用第一个输入字段，它会给我所需的效果。

   2.1我知道在这种情况下，我没有更新状态，我只是在价值道具上做正确的数学（但它可以证明我的意图）。

   2.2我不知道我是应该在tempValue上还是在另一种方法上进行数学计算。

   2.3我可以使用等待计时器并查找onKeyDown然后setState。

3. 我可能会使用不受控制的组件，但它不会是React方式（这是一件坏事）。

4. 我的setState最初使用[计算属性]作为名称，但为了演示目的而对其进行了更改。

Working CodeSandbox Demo

Answer 1

由于您可以访问onChange函数中的输入，因此可以将输入名称关闭event.target并使用该名称在您的状态中进行修改。

或者你可以绑定函数：

<CurrencyInput
    onChange={this.handleCurrencyInput.bind(this, currency.name)}
/>

但这不是你渲染中最好的，所以你可以在你的类上创建renderCurrencyInput方法并在那里绑定

计算属性可行，我不会发现它的大部分问题。然后，您可以从货币列表

中驾驶您的初始this.state