Question

我对React更加熟悉，但我已经陷入了输入问题。

我根据用户输入生成输入，所以如果他们选择1，我会返回2个输入框，然后我返回4个输入框。另外我想用计算出的数字预先填充输入框。让我们说他们是最小和最大范围

所以我有这样的事情：

minArr = [];
maxArr = [];
for (let i = 0; i < this.state.userSelectInputAmount; i++) {
    minArr.push(this.calculateMin(item);
    maxArr.push(this.calculateMax(item);
}
return Array(this.state.userSelectInputAmount).fill().map((_, i) => {
    return (
      <div className="form-group">
        <label>
          <input className="form-control"
                 placeholder="Minimum Range"
                 type="number"
                 value={minArr[i]}
                 step="any" />
          <input className="form-control"
                 placeholder="Maximum Range"
                 type="number"
                 step="any"
                 value={maxArr[i]} />
        </label>
      </div>

min和max是分组，分别对应于用户输入假设他们选择1，则范围可以来自1 to 10。如果他们选择2，则1 to 5和6 to 10。

使用value允许我重新呈现选项，但不允许用户自定义自己的输入（1 to 7而不是1-10）。读取文档时，defaultValue不应该是一个不错的选择，因为我希望将来能够重新呈现（即用户输入）。有什么想法吗？

Answer 1

您希望将所有输入的当前值保持在状态（或在通道实现中，但最简单的解决方案仅处于状态）。使用所需的默认值初始化所有值，并将它们作为value传递给每个输入。然后，每个输入都应该有一个onChange处理程序，调用setState来更新值。这样，当用户更改输入时，更新状态以反映新的更改，然后更新输入以显示用户键入的相同值。听起来有点傻，但这是React的常见做法。

Answer 2

所以我使用了defaultValue，但我使用了onChange={this.forceUpdate}，现在可以使用了。{/ p>

预设输入值并允许用户更改

2 个答案: