Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2022, 14:47
Новичок на форуме
Отправить личное сообщение для daniil4fun Посмотреть профиль Найти все сообщения от daniil4fun
 
Регистрация: 25.02.2022
Сообщений: 1

React, useState
Здравствуйте форумчане, начал изучать React. Дошел до состояний, и не могу понять одной (вероятнее всего элементарной) вещи. Есть код:

function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);

function handleChange1(event) {
setValue1(event.target.value);
}

function handleChange2(event) {
setValue2(event.target.value);
}

function handleClick() {
setResult(Number(value1) + Number(value2));
}

return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />

<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;

Подскажите, пожалуйста, зачем заводить const [result, setResult] = useState(0); Не проще было бы завести переменную Result, в которую бы попадал результат сложения введенных в инпуты чисел (const result = {Number(value1) + Number(value2)}? Объясните пожалуйста, может я что-то не понимаю? Заранее благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2022, 20:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от daniil4fun
может я что-то не понимаю?
Тут кагбэ ты и прав и не прав одновременно...

Сама переменная и нафик не нужна. Можно использовать первые две переменные.
Но использовать, как ты предложил, так же не получится.
Сообщение от daniil4fun
const result = {Number(value1) + Number(value2)}
Куда ты это хочешь поместить?
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2022, 09:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

daniil4fun, и учись делать полные тестовые примеры. А так же правильно их на форуме оформлять.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
//import './index.css';

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	function handleChange1(event) {
		setValue1(event.target.value);
	}
	
	function handleChange2(event) {
		setValue2(event.target.value);
	}
	
	function handleClick() {
		setResult(Number(value1) + Number(value2));
	}
	
	return (
		<div>
			<input value={value1} onChange={handleChange1} />
			<input value={value2} onChange={handleChange2} />
			
			<button onClick={handleClick}>btn</button>
			<p>result: {result}</p>
		</div>
	)
}


ReactDOM.render(
	<App />,
	document.getElementById('root')
);
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2022, 11:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

daniil4fun,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно отрендерить данные на react с разрывом? s24344 Элементы интерфейса 0 28.01.2019 19:35
виджет комментариев переделать с react на redux melnikov24 Node.JS 1 17.01.2019 12:51
React Router - re-render компонента при смене url smegol Библиотеки/Тулкиты/Фреймворки 9 29.09.2018 23:58
node.js + react не принимает пост запрос korih Node.JS 0 15.04.2018 17:52
Ищу Senior Frontend (React, Angular), Москва, 140 - 180 000 gross, full time офис. Ekaterina Polyakova Работа 0 11.08.2016 19:07