Javascript 如何在React Js中编辑输入值？

我正在尝试为我的应用程序创建一个组件，当我点击一个按钮时，输入字段打开，添加文本后，我再次点击该按钮，另一个输入打开，依此类推。然后，所有这些输入的目标值应保存在不同的状态中，并显示在其他组件中。到目前为止，我能够创建这样的输入，但我不知道如何编辑输入字段。我的代码：

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [input, setInput] = useState([{}]);
  const [data, setData] = useState([]);

  function handleChange(i, e) {
    e.preventDefault();

    setInput([
      {
        id: i,
        value: e.target.value
      }
    ]);
  }

  function handleAddInput() {
    const values = [...input];
    values.push({ value: null });
    setInput(values);
  }

  const handleSave = () => {
    let value = input?.map((item) => {
      return item.value;
    });
    if (!value || /^\s*$/.test(value)) {
      return;
    }

    const newData = [...data, ...input];

    setData(newData);

    setInput([])
  };

  return (
      <div className="App">
        <button type="button" className="btn" onClick={() => handleAddInput()}>
          Add  Input fields
        </button>

        {input?.map((input, idx) => {
          return (
            <div key={input.id}>
              <input
                type="text"
                placeholder="Enter text"
                onChange={(e) => handleChange(idx, e)}
                value={input.value}
              />
            </div>
          );
        })}

       
    
<h2>Display Added Fields and Edit</h2>
      {data?.map((item) => {
        return (
          <>
            <input defaultValue={item.value}
            
            
            
            />
          </>
        );
      })}

<button className="btn" onClick={handleSave}>Save</button>

      {data?.map((item) => {
        return (
          <div style={{ display: "flex", flexDorection: "column", marginTop:"20px" }}>
            {item.value}
          </div>
        );
      })}
        </div>
  );
}

导入“/styles.css”； 从“React”导入React，{useState}； 导出默认函数App（）{ const[input，setInput]=useState（[{}]）； const[data，setData]=useState（[]）； 功能手柄更改（即，e）{ e、 预防默认值（）； 设置输入([ { id:我， 价值：即目标价值 } ]); } 函数handleAddInput（）{ 常量值=[…输入]； push（{value:null}）； 设置输入（值）； } 常量handleSave=（）=>{ 让值=输入？.map（（项目）=>{ 返回项.value； }); 如果（！value | |/^\s*$/.test（value））{ 返回； } const newData=[…数据，…输入]； setData（newData）； setInput（[]） }; 返回( HandLeadInput（）}> 添加输入字段 {input？.map（（input，idx）=>{ 返回( handleChange（idx，e）} value={input.value} /> ); })} 显示添加的字段并进行编辑 {data？.map（（项目）=>{ 返回( ); })} 拯救 {data？.map（（项目）=>{ 返回( {item.value} ); })} ); }

当我单击“添加输入字段”弹出新输入时，我输入任何输入文本，然后再次单击“添加输入字段”，另一个输入打开，当我单击“保存”按钮时，所有输入值都保存到状态（作为数据）并显示为输入，然后我可以通过“数据”映射并显示收到的输入。就像在图片上，我添加了“first”，然后添加了“second”，它们显示得很好，但我不知道如何编辑它们，例如，将“first”更改为“third”，在保存按钮上，应该显示“third”而不是“first”。非常感谢您的帮助和建议。

问题

使用索引作为id不是一个好主意，它们不是唯一的

handleChange

不会保留现有的输入状态

React键的其他各种问题，以及将状态从

输入复制到
数据

解决方案

您不需要输入对象，您可以存储来自输入的字符串原语。这意味着您也不需要

id

属性，按索引进行更新非常简单

应使用功能状态更新从以前的状态更新

我建议使用表单和

onSubmit

处理程序来处理

数据

状态数组值的更新

代码：

演示2

---

谢谢，这很有帮助。只有一个问题，我如何将id添加到[数据]并使其成为对象？像这样{id:1，value:input}@new_reactjs请检查它使用guid作为

id

属性。它不使用传递的索引，而是在

id

上匹配以更新输入值。感谢您更新了代码，已选中，并且输入有id，但没有数据。很抱歉，我一直在问，但我不确定如何将id添加到数据中，而不是输入。@new\u reactjs您将

input

的全部内容复制到

数据中，而不是将其剥离出来。这需要更新
数据
数组元素的显示，因为它们现在也是对象。我用第二个codesandbox中更新的代码更新了我的答案。请再次检查，希望这能使它更清楚。
function App() {
  const [input, setInput] = useState([]);
  const [data, setData] = useState([]);

  function handleChange(i, e) {
    e.preventDefault();

    setInput((values) =>
      values.map((value, index) => (index === i ? e.target.value : value))
    );
  }

  function handleAddInput() {
    setInput((input) => input.concat(""));
  }

  const saveHandler = (e) => {
    e.preventDefault();

    // Map all existing form field values
    setData((data) => data.map((_, i) => e.target[i].value));

    // If there are any input values, add these and clear inputs
    if (input.length) {
      setData((data) => data.concat(input));
      setInput([]);
    }
  };

  return (
    <div className="App">
      <button type="button" className="btn" onClick={handleAddInput}>
        Add Input fields
      </button>

      {input.map((input, idx) => {
        return (
          <div key={idx}>
            <input
              type="text"
              placeholder="Enter text"
              onChange={(e) => handleChange(idx, e)}
              value={input.value}
            />
          </div>
        );
      })}

      <h2>Display Added Fields and Edit</h2>
      <form onSubmit={saveHandler}>
        {data.map((item, i) => {
          return (
            <div key={i}>
              <input id={i} defaultValue={item} />
            </div>
          );
        })}

        <button className="btn" type="submit">
          Save
        </button>
      </form>

      {data.map((item, i) => {
        return (
          <div
            key={i}
            style={{
              display: "flex",
              flexDirection: "column",
              marginTop: "20px"
            }}
          >
            {item}
          </div>
        );
      })}
    </div>
  );
}

function App() {
  const [input, setInput] = useState([]);
  const [data, setData] = useState([]);

  const handleChange = (id) => (e) => {
    e.preventDefault();

    setInput((values) =>
      values.map((el) =>
        el.id === id
          ? {
              ...el,
              value: e.target.value
            }
          : el
      )
    );
  };

  function handleAddInput() {
    setInput((input) =>
      input.concat({
        id: uuidV4(),
        value: ""
      })
    );
  }

  const saveHandler = (e) => {
    e.preventDefault();

    setData((data) =>
      data.map((el) => ({
        ...el,
        value: e.target[el.id].value
      }))
    );

    if (input.length) {
      setData((data) => data.concat(input));
      setInput([]);
    }
  };

  return (
    <div className="App">
      <button type="button" className="btn" onClick={handleAddInput}>
        Add Input fields
      </button>

      {input.map((input) => {
        return (
          <label key={input.id}>
            {input.id}
            <input
              type="text"
              placeholder="Enter text"
              onChange={handleChange(input.id)}
              value={input.value}
            />
          </label>
        );
      })}

      <h2>Display Added Fields and Edit</h2>
      <form onSubmit={saveHandler}>
        {data.map((item) => {
          return (
            <div key={item.id}>
              <label>
                {item.id}
                <input id={item.id} defaultValue={item.value} />
              </label>
            </div>
          );
        })}

        <button className="btn" type="submit">
          Save
        </button>
      </form>

      {data.map((item) => {
        return (
          <div
            key={item.id}
            style={{
              display: "flex",
              flexDirection: "column",
              marginTop: "20px"
            }}
          >
            <div>
              {item.id} - {item.value}
            </div>
          </div>
        );
      })}
    </div>
  );
}