React JS не получается очистить TextField (MUI-component) до конца при вводе
В проекте я реализую функцию добавления новых полей в таблицу. Все данные вводятся в несколько TextField (компонент подтянут из библиотеки mui), записываются в стейт newColumnData и по клику на кнопку (метод onAddNewColumnHandler) добавляются в таблицу:
const [newColumnData, setNewColumnData] = useState({
name: "",
originalType: "",
isVisible: true
});
function columnCreationTextFields() {
return (
<>
<TableBody>
<TableRow>
<TableCell>
<TextField
id="name"
label="Название"
variant="standard"
value={newColumnData.name}
onReset={true}
onChange={(e) =>
handleChangeColumnData({
name: e.target.value
})
}
/>
</TableCell>
<TableCell>
<TextField
id="originalType"
label="Тип"
variant="standard"
value={newColumnData.originalType}
onChange={(e) =>
handleChangeColumnData({
originalType: e.target.value
})
}
/>
</TableCell>
</TableRow>
</TableBody>
</>
);
};
const handleChangeColumnData = (data) => {
if (data.name)
setNewColumnData((prevState) => ({
...prevState,
name: data.name
}));
if (data.originalType)
setNewColumnData((prevState) => ({
...prevState,
originalType: data.originalType
}));
};
const onAddNewColumnHandler = () => {
const changedColumns = [];
Object.assign(changedColumns, table.columns);
const newColumn = {
name: `${newColumnData.name}*`,
originalType: `${newColumnData.originalType}`,
isVisible: true
};
changedColumns.push(newColumn);
const changedTable = {
id: table.id,
name: table.name,
color: table.color,
position: table.position,
columns: changedColumns
};
onChangeTableHandler(changedTable, areaName);
};
В данный момент из-за такой записи if (data.name) setNewColumnData((prevState) => ({ ...prevState, name: data.name })); если я хочу стереть весь текст из TextField, у меня не получается это сделать. Без такой записи все данные, которые я ввожу в TextField не попадают в стейт. Каким образом можно решить проблему, чтобы до конца очищалось поле ввода?
Источник: Stack Overflow на русском