尝试编辑动态创建的输入字段时被删除

Question

我正在创建一个新的onClick按钮输入字段。输入的默认状态为只读。但是，我在它附近有一个编辑按钮，使该字段不是只读的。当我点击按钮时，字段被删除。请建议。

这是我的。

import React, { useReducer } from "react";
import "./styles.css";
import { get, uniqueId, cloneDeep, map } from "lodash";
const initialState = {
fields: []
};
export default function App() {
const [state, setState] = useReducer(
(state, newState) => ({
...state,
...newState
}),
initialState
);
const handleEdit = (i) => {
const fieldsListClone = cloneDeep(state.fields);
const result = map(fieldsListClone, (item) => {
if (item.id === i) {
item.editable = true;
}
return item;
});
setState({
fields: result
});
};
const addNewField = () => {
const numFields = state.fields.length + 1;
const renderFieldInput = (i) => {
const field = state.fields.find((item) => item.id === i);
return (
<div key={uniqueId()} style={{ display: "flex" }}>
<div style={{ border: "1px solid red", marginRight: "20px" }}>
{i + 1}
</div>
<div>
<input readOnly={!get(field, "editable") || true} />
</div>
<div>
<button onClick={() => handleEdit(i)}>Edit</button>
</div>
</div>
);
};
const fieldInputs = [];
for (let i = 0; i < numFields; i++) {
fieldInputs.push({
id: i,
field: renderFieldInput(i),
editable: false
});
}
setState({
fields: fieldInputs
});
};
return (
<div className="App">
{state.fields.map((item) => (
<div key={uniqueId()}>{item.field}</div>
))}
<button onClick={addNewField}>Add new field</button>
</div>
);

}

这是我的codesandbox链接

是否有更好的方法来创建新的表单字段?我的想法是将字段的所有属性存储在单个状态值中，包括可编辑字段和值字段。

Answer 1

修复不创建元素并将其存储在状态的问题。