如何在ReactJS中编辑具有默认值的输入

Question

那么，除了将value更改为defaultValue以手动更改输入值之外，还有其他方法吗？(使用defaultValue时，我的程序无法正常工作(

ChildComponent = React.memo(
({ name, index, onChange, onDelete
}) => {
return (
<div>
<input value={name} onChange={onChange(index, name)} />
<button onClick = {() => onDelete(index)}>delete</button>
</div>
);
}
);
function App() {
const [names, setNames] = React.useState(["First", "Second"]);
const newName = React.useRef();
const onNameChange = (index: number, newName: string) => (event: {
target: { value: string };
}) => {
names[index] = event.target.value;
setNames(names);
};
function onNameDelete(index: number) {
const nameArr = [...names];
nameArr.splice(index, 1);
setNames(nameArr);
}
return (
<div>
{names.map((name, index) => (
<ChildComponent
key={index}
name={name}
index={index}
onChange={onNameChange}
onDelete={onNameDelete}
/>
))}
</div>
);
}

Answer 1

问题出现在ChildComponent中的onChange输入处理程序中。您根本没有使用用户传递的值进行输入。您需要类似于onDelete处理程序来编写它(使用新值，在我存储在event.target.value中的代码段中(：

ChildComponent = React.memo(
({ name, index, onChange, onDelete
}) => {
return (
<div>
<input value={name} onChange={(event) => onChange(index, event.target.value)} />
<button onClick = {() => onDelete(index)}>delete</button>
</div>
);
}
);

还可以查看Html文档中输入更改处理程序的定义。

编辑：另一个问题是父控制器中的处理程序：

const onNameChange = (index: number, newName: string) => (event: {
target: { value: string };
}) => {
names[index] = event.target.value; //this is BAD, do not change your state value directly, moreover, the event is undefined here
setNames(names);
};

您需要不可更改地更新数组中的项目(来源更新数组中项目(：

const onNameChange = (index: number, newName: string) => (event: {
target: { value: string };
}) => {
const newNames = names.map((item, itemIndex) => {
if (itemIndex !== index) {
// This isn't the item we care about - keep it as-is
return item
}
// Otherwise, this is the one we want - return an updated value
return newName;
});
setNames(newNames);
};