时间戳

首页 > 解决方案 > 刷新输入以更改值 ReactJS

javascript - 刷新输入以更改值 ReactJS

问题描述

我有一个动态表单，当在上一个问题上提供答案时显示输入（选择、多个或文本）。

创建文本输入时，是因为上一个问题的答案，这意味着可以通过不同的答案来创建多种方式。

问题 ：

例如，当我回答一个选定的问题时，接下来会显示一个文本输入。如果我回答此输入，则可以显示另一个输入。但是，如果我为第一个选择输入更新我的答案，这意味着创建了一个新的方式，但下一个仍然是文本输入，所以 ReactJS 不创建新的，只是更新现有的。事实是该值仍在输入中，这不是我想要的，我需要通过定义的值或空值来更新该值，但这需要更新。

我创建了一个带有一点复制的stackblitz示例。

在此复制中，您可以在选择输入中选择一个值，但是如果您选择另一个，则该值将不会在输入中更新。更新它的唯一方法是清除它并通过选择一个新值重新创建它。

我知道在此示例中，使用状态中的值并直接在 change 方法中更新状态将起作用，但在我的项目中，我没有定义数量的文本输入。

我看到的唯一用 state 做的事情是创建一个数组并在从表单中添加或删除输入时动态添加或删除值。但我更喜欢“刷新”输入法。

标签： javascriptreactjs

解决方案

您可以在 Array 状态中添加您选择的值，然后循环映射

//states
            
this.state = {
   values: []
};

//joinin new values with previous array
handleSelect(event) {
    var joined = this.state.values.concat(event.target.value);
    this.setState({ values: joined });
}
    
//then mapping on render
<div>
    {
       this.state.values.map(x=>(
         <Input value={x} placeholder="type here" />
       ))
    }
 </div>

这是您的代码中的工作示例：https ://stackblitz.com/edit/react-n1jbk6

推荐阅读