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

我对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不应该是一个好选择，因为我希望将来能够重新渲染（即用户输入）。有任何想法吗？

来源

2016-09-18 kermitvomit

您会希望保持所有输入的当前值处于状态（或者在流量实现中，但最简单的解决方案处于状态）。用所需的默认值初始化所有值，并将其作为value传递给每个输入。然后每个输入应该有一个onChange处理程序，该处理程序调用setState来更新该值。这样，当用户更改输入时，状态会更新以反映新的更改，然后更新输入以显示用户键入的相同值。这听起来有点愚蠢，但这是React的惯例。

来源

2016-09-18 05:41:52

感谢您的建议，它引导我保持'价值'的道路。所以我有类似的设置，除了现在我把所有'minArr'和'maxArr'存储为一个状态，并且我可以遍历这些值。我如何设置它有什么问题。我仍然有'价值= {this.state.minArr [我]'我真的想使用'this.state.value'，但它不会工作，因为我得到我的价值预加载到'minArr/maxArr' – kermitvomit

罐你更新你的问题以包含这段代码？根据你的描述，我不能完全遵循。 –

呜！所以我认为我更好地遵循了这一点，但主要关键在于使用'refs'来解析当前输入:) – kermitvomit

所以我用defaultValue但我用onChange={this.forceUpdate}现在它的工作。

来源

2016-09-18 10:02:29 kermitvomit

这不太适合使用forceUpdate。请参阅[文档]（https://facebook.github.io/react/docs/component-api.html#forceupdate）“通常，您应该尽量避免使用forceUpdate（），并且只能从this.props和this中读取.state in render（）。这使得你的组件“纯粹”并且你的应用程序变得更简单和更高效。“ –

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

回答

相关问题