отображение результата в div после отправки в React

#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)  }