#javascript #reactjs
Вопрос:
у меня есть функция вычисления, всякий раз, когда я помещаю числа в поле ввода, я хочу, чтобы она вычисляла результат при нажатии кнопки «Отправить», и я также хочу, чтобы результат отображался в div. теперь всякий раз, когда я нажимаю кнопку, она отображает правильный результат в консоли, но я хочу знать, как я могу отобразить конечный результат в div внутри формы с крючками?
кнопка :
const handleSubmit = (e) =gt; { e.preventDefault(); console.log(solution) }
форма :
lt;div onChange={(e) =gt; setResult(solution)}gt; result : {setResult} lt;/divgt;
Комментарии:
1. Я думаю, вам следует добавить полный код вашего компонента. Как это
handleSubmit
называется?
Ответ №1:
Я предполагаю, что вы указали свое состояние следующим образом:
const [result, setResult] = useState();
В этом случае вам нужно изменить свой обработчик на состояние обновления всякий раз, когда вы получаете результат:
const handleSubmit = (e) =gt; { e.preventDefault(); //... setResult(solution) }
и визуализируйте его в div:
lt;divgt; result: {result} lt;/divgt;
ПРИМЕЧАНИЕ: элемент div не имеет события onChange
Ответ №2:
lt;divgt;
у него нет onChange
. Я думаю, что вы пытаетесь прислушаться к изменениям в решении. Лучший способ сделать это-с useState
помощью . Если вы сохраняете свое решение в состоянии с чем-то подобным const [result, setResult] = useState()
, div будет больше похож на:
lt;divgt; result : {result} lt;/divgt;
Вам просто нужно убедиться, что вы правильно обновляете состояние при нажатии кнопки. Может быть, как:
const handleSubmit = (e) =gt; { e.preventDefault(); //... do calculation and assign it to solution variable setResult(solution) }