Перевод состояния в исходное состояние после нажатия кнопки отправки

#javascript #reactjs

Вопрос:

Я извлекаю данные из серверной части и отображаю их на интерфейсе reactjs. У меня есть форма, в которую мы вводим некоторую строку во ввод, затем она отображает вывод. Я должен обновлять страницу каждый раз, чтобы отображать новые данные. Я хочу установить для своего состояния значение null после того, как мы нажмем кнопку отправки. Проблема здесь в том, что у меня уже есть один обработчик событий, назначенный кнопке отправки. Как я могу установить для своего состояния значение null после нажатия кнопки отправки и одновременно отобразить мои выходные данные.

 const [myData, setMyData] = useState(null);
const [endP, setEndP] = useState(null);

const inputHandler = (event) => {
  setMyData(event.target.value);
};

const buttonHandler = (event) => {
  event.preventDefault();
  setEndP(`http://localhost:1000/userData?Q=${myData}`);
};

<form onSubmit={buttonHandler}>
  <input type="text" onChange={inputHandler} />
  <button type="submit">Get It</button>
</form>;

Ответ №1:

Вы можете выполнить это, сделав поле ввода в вашей форме контролируемым вводом, предоставив value атрибут и onChange обработчик. при этом initialState myData не может быть нулевым, если вы изначально установите для него значение null, ваше поле ввода будет заблокировано, и вы не сможете изменить его значение. Подробнее здесь Управляемый ввод

 const FormComponent = (props) => {
    const [myData, setMyData] = useState("");
    const [endP, setEndP] = useState(null);

    const inputHandler = (event) => {
        setMyData(event.target.value);
    };

    const buttonHandler = (event) => {
        event.preventDefault();
        setEndP(`http://localhost:1000/userData?Q=${myData}`);
        setMyData('')
    };

    return (
        <form onSubmit={buttonHandler}>
            <input value={myData} type="text" onChange={inputHandler} />
            <button type="submit">Get It</button>
        </form>
    )
    
}

Ответ №2:

Я, вероятно, думаю, что вам нужно отменить event.preventDefault(), Чтобы ваша страница обновлялась автоматически, поскольку тип вашей кнопки — submit, и состояние снова будет изменено на null