javascript - 在 React 中编辑多个输入字段

Question

请检查此代码https://stackblitz.com/edit/react-koqfzp?file=src/Section.js

每次我添加一个项目时，我也会添加一个我想要编辑的随机数。该数字在 MUI 文本字段组件中呈现。

<TextField
            type="number"
            variant="standard"
            aria-readonly={edit === true ? false : true}
            value={edit === true ? value : numbers[i]}
            onChange={(e) => setValue(e.target.value)}
          />

按钮是根据编辑状态呈现的，如下所示:

{edit === true ? (
            <button onClick={() => saveEdit(i)}>Save</button>
          ) : (
            <button onClick={() => setEdit(true)}>Edit</button>
          )}

它正在工作，我可以编辑它并使用新值重新渲染，问题是当我单击编辑按钮时，每个字段都会收到新的输入值，并且保存按钮会显示在每个字段中，尽管当我保存时它，它返回到它的原始值。我如何才能做我正在做的事情，但仅限于一个特定领域？

Answer 1

问题是您将 setEdit 用作 bool 值

您可以将其定义为要编辑的数组的索引，以-1作为起始值

const [edit, setEdit] = useState(-1)
...

{edit === i ? (
            <button onClick={() => saveEdit(i)}>Save</button>
          ) : (
            <button onClick={() => setEdit(i)}>Edit</button>
          )}