无法使用反应编辑预填充的文本框答案

【问题标题】：unable to edit pre populated textboxes using react无法使用反应编辑预填充的文本框
【发布时间】：2023-01-11 08:14:35
【问题描述】：

我有一个表单，其中包含从 WebAPI 预填充的文本框。当我尝试删除文本框中的文本以进行更改时，它不会删除预填充文本。如果我尝试在文本上键入，我只能在控制台中看到我正在键入的单词的第一个字母，但 UI 上没有任何变化：它就像文本框处于只读模式，但事实并非如此

const Details = () => {
  const [ server, setServer] = useState([]);
  
  useEffect(() = > {
   getServerNames();
  }

  const getServerName = async() => {
     //gets the list of server and their details from the API
  }

  const serverNameChange = (e) => {
   setServer(e.target.value);

  }


  return (
    <div>
    { details.map((data) => {

      <input type="text" name="server" onChange={serverNameChange} value={data.serverName} />
     ))}
    </div>

  )


};

我缺少什么允许用户编辑文本框？文本框预先填充了数据，但是可以更改。这只发生在预先填充的文本框上。我不想单击“编辑”按钮，我想让用户能够在文本框中进行更改然后保存。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

这可能是因为 data.serverName 永远不会改变。它基本上是一个静态值。如果设置输入的值，则必须在 onchange 事件中处理更改（键入时）。根据我的假设，根据您的代码，您有多个输入框，其中有预加载的值，如果其中一个输入框被文本输入中的值更改，您想要更改您的 serverName。

如果是这样，请将您的详细信息映射到状态变量中：

const [serverNames, setServerNames] = useState(details.map( data => data.serverName));

像这样映射状态变量的输入：

{serverNames.map((name,index) => {
  < input type="text" name="server" onChange={(e) => {updateServerState(e, index)}} value={serverNames[index]} />
 }
}

您的 updateServerState 方法如下所示：

updateServerState(e, index) {
  let myStateData = [...serverNames];
  myStateData[index] = e.target.value;
  setServerNames(myStateData);
  setServer(e.target.value);
}

警告：我没有测试代码，只是写下来了。但这应该让您了解如何解决您的问题。

长话短说；博士；切勿将非状态变量用于动态值。

【讨论】：