React JS не получается очистить TextField (MUI-component) до конца при вводе

Рейтинг: 0Ответов: 0Опубликовано: 05.04.2023

В проекте я реализую функцию добавления новых полей в таблицу. Все данные вводятся в несколько 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 не попадают в стейт. Каким образом можно решить проблему, чтобы до конца очищалось поле ввода?

Ответы

Ответов пока нет.