Нужно, чтобы поля формы чистились при неудачной отправке данных на бэк, как это сделать в компоненте(isClear приходит из redux как сигнал)u)?

Question

[Анастасия]

spoiler

import React, { useState } from 'react';
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import './CustomInput.css';
import { RootState } from '../common/root-reduser';

interface CustomInputProps {
name: string;
type: string;
label: string | null;
placeholder: string;
value: string;
onChange: (data: CallbackCustomInputData) => void;
isClear?: boolean;
}

export interface CallbackCustomInputData {
name: string;
value: string;
}

const clearSelector = (state: RootState) => state.user.isClear;

const getClear = createSelector(clearSelector, (i) => i);

const CustomInput: React.FC = (props: CustomInputProps) => {
const [checked, setChecked] = useState(false);
const handleKeyDown = (event: React.KeyboardEvent) => {
const { key } = event;
if (key === ' ' || key === 'Enter') {
setChecked(!checked);
}
};
return (

htmlFor={`${props.type}-${props.label}`}
className={
props.type === 'checkbox'
? 'wrapper-input__label-checkbox'
: 'wrapper-input__label-custom'
}
>
{props.label}

{props.type !== 'checkbox' ? (


name={props.name}
className="wrapper-input__custom-input"
id={`${props.type}-${props.label}`}
type={props.type}
placeholder={props.placeholder}
value={props.isClear && props.value}
defaultValue={props.value}
onChange={(event: React.ChangeEvent) =>
props.onChange({ name: props.name, value: event.currentTarget.value })
}
/>

) : (

role="checkbox"
aria-checked={checked}
aria-labelledby={`${props.type}-${props.label}`}
tabIndex={0}
className={`square outline icon column__icon ${checked ? 'check' : ``}`}
onClick={() => setChecked(!checked)}
onKeyDown={handleKeyDown}
/>
name={props.name}
className="wrapper-input__custom-input"
id={`${props.type}-${props.label}`}
type={props.type}
placeholder={props.placeholder}
checked={checked}
onChange={() => setChecked(!checked)}
/>

)}

);
};

CustomInput.defaultProps = {
isClear: undefined,
};

export default connect((state: RootState) => {
return {
isClear: getClear(state),
};
}, null)(CustomInput);

Answer 1

[xenonhammer]

Если поля формы контролируемые, то нужно каждому полю давайть defaultValue=''

Comments

[Анастасия]

да, я так и делаю. defaultValue - это параметр, который я передаю по props из файла конфигурации, он равен пустой строке. input - это у меня отдельный компонент, который я импортирую в форму и вывожу через map согласно файлу конфигурации. также я в родительском компоненте формы прописала хук, который меняет состояние и передает его потом по клику на бэк. но проблема в том, что value у меня приходит из конфига и я его еще через хук моделирую и не передаю кстати. не пойму, как сделать верно
это компонент родительской формы

import React, { useState } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { Redirect } from 'react-router-dom';
import './AuthFormPage.css';
import config from '../../config/config';
import CustomForm from '../../components/CustomForm';
import CustomButton from '../../components/CustomButton';
import { CallbackCustomInputData } from '../../components/CustomInput';
import { signInRequest, UserData } from '../../common/data/auth/data-actions';
import { hideModal } from '../../common/data/modal/data-modal-actions';
import { RootState } from '../../common/root-reduser';
import CustomModal from '../../components/CustomModal';
import Loader from '../../loader/Loader';

const mapState = (state: RootState) => ({
state: state.user,
modal: state.data,
});

const mapDispatchToProps = { signInRequest, hideModal };

const connector = connect(mapState, mapDispatchToProps);

type PropsFromRedux = ConnectedProps;

const AuthFormPage: React.FC = (props) => {
const [inputState, setInputState] = useState({ email: '', password: '' });
const inputChangeHandler = (e: CallbackCustomInputData) => {
setInputState({ ...inputState, [e.name]: e.value });
};
const onClick = () => {
props.signInRequest(inputState);
};
return (
<>


Добро пожаловать



LOGO

УПРАВЛЕНИЕ РАЗРАБОТКОЙ ЗРЕЛЫХ МЕСТОРОЖДЕНИЙ



{props.state.isLoading ? : null}


Изменить пароль


Служба поддержки




text="Отправить форму"
disabled={props.state.isLoading}
clickHandler={onClick}
/>


{props.modal.showModal && props.hideModal()} />}
{props.state.isToken && }
>
);
};

export default connector(AuthFormPage);