在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作为布尔值

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

const [edit, setEdit] = useState(-1)
...
{edit === i ? (
<button onClick={() => saveEdit(i)}>Save</button>
) : (
<button onClick={() => setEdit(i)}>Edit</button>
)}

Answer 2

我建议创建另一个组件示例:Item有它自己的状态编辑，值状态并将所需的道具传递给它它们是值，数字，saveEdit(index,newValue)，removeItem(index)以及索引

saveEdit必须在section中通过传递索引和newValue来更改

我希望你明白了

Answer 3

在组件中添加地图值，并在组件中添加状态，这样每个组件就有多个状态，而不是只有一个

父组件

{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)}
/>
)