Переключатель форм с очисткой ввода

Условие

Необходимо реализовать очистку значения поля ввода при изменении состояния чекбокса. Когда галочка отмечена – отображается первая форма, когда снята – вторая. При переключении формы её содержимое должно сбрасываться.

import React from 'react';

export function App(props) {
    const [checked, setChecked] = React.useState(true);

    const onToggle = event => {
        setChecked(event.target.checked);
    };

    const FormOne = () => {
        return (
            <form>
                <label>Name 1</label>
                <input type='text' />
            </form>
        );
    };

    const FormTwo = () => {
        return (
            <form>
                <label>Name 2</label>
                <input type='text' />
            </form>
        );
    };

    const activeForm = checked ? <FormOne /> : <FormTwo />;

    return (
        <div className='App'>
            <div>
                <label>test</label>
                <input type='checkbox' checked={checked} onChange={onToggle} />
            </div>
            {activeForm}
        </div>
    );
}

Ответ

Текущий код уже сбрасывает input: FormOne и FormTwo имеют разные типы, а ещё создаются заново при каждом рендере App. Последнее вызывает лишние сбросы и должно быть исправлено.

Вынесите компоненты форм на уровень модуля. При переключении между разными типами React размонтирует одну форму и монтирует другую, поэтому неконтролируемый input начнёт пустым.

Если использовать один общий компонент Form, задайте key={checked ? 'one' : 'two'}: смена ключа явно сбросит его локальное состояние и DOM. Для контролируемого input можно вместо этого очистить value в onToggle. Не объявляйте компонент формы внутри App: иначе ввод будет теряться не только при переключении, но и при посторонних рендерах родителя.