在 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>
          )}

它正在工作，我可以编辑它并使用新值重新呈现，问题是当我单击编辑按钮时，每个字段都会收到新的输入值并且保存按钮会显示在每个字段中，尽管当我保存它，它 returns 到它的原始值。我怎样才能做我正在做的事情，但只针对一个特定领域？

Answer 1

问题是您将 setEdit 用作布尔值

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

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

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

Answer 2

我建议创建另一个组件 Exemple:Item，它有自己的状态编辑，值状态并将所需的道具传递给它，即 value、numbers、saveEdit(index,newValue)、removeItem(index) 以及 index

saveEdit 必须通过传递索引和 newValue 在部分中进行更改

我希望你明白这一点

Answer 3

在组件中添加地图值并在组件内添加状态，这样每个组件就会有多个状态，而不仅仅是 1

父组件

{section.items.map((item, i) => (
     <Component key={i} item={item}/>
)}

子组件

const Component = ({ section, addItem, removeItem}) => {
   const [newItem, setNewItem] = useState('');
   const [edit, setEdit] = useState(false);
   const [value, setValue] = useState(0);
   const [numbers, setNumbers] = useState(section.number);

   const handleChange = (e) => {
        setNewItem(e.target.value);
   };

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

在 React 中编辑多个输入字段

Editing an input field among many in React

javascript

reactjs

material-ui