Привет. Подскажите как решить задачу. Есть 2 input. Есть ф-я

Question

Привет. Подскажите как решить задачу. Есть 2 input. Есть ф-я

- логика - вводим цифру в первый, она умножается на 2 и результат выводится в второй инпут. И наоборот - вводим информацию во второй - она умнождается и выводится в первый. Вывод в второй инпут есть для этого использовал value={sum}. А вот как сделать так что бы и при вводе цифр во второй - вывод происходил в первый инпут?. value={sum} уже не работает тут.

https://codesandbox.io/s/nostalgic-flower-exfcud?file=/src/App.js

#frontend #javascript #programming #react.js #russian

0

14.04.2022

3 ответов

23 просмотра

Vlad Doletskiy Автор вопроса

Станислав Алимпиев
По идее вот так, не лучший вариант, но рабочий, од...

Спасибо) открыли мне глаза) Да, оптимизирую код)

0

14.04.2022

Станислав Алимпиев

Vlad Doletskiy
Спасибо) открыли мне глаза) Да, оптимизирую код)

Даже больше скажу, значение инпутов можно записывать в объекты, только для такого связывания надо указать имя полям, только тут надо быть осторожным, поля данным способом лучше связывать в пределах 1 компонента логики или формы так как будет вызывать лишние ререндеры. Хук для полей ввода import {useState} from 'react'; export function useHandleChange(initialFields) { const [formFields, setFormFields] = useState(initialFields); const handleChange = (ev) => { const { name, value } = ev.target; setFormFields((formFields) => ({ ...formFields, [name]: value, })); } return { formFields, setFormFields, handleChange } } а вот что должно быть в компоненте где используется хук const initialFields = { login: '', password: '', } <label className={style.form_label} > Логин: <FormControl required className={style.form_input} name="login" value={formFields.login} onChange={handleChange} /> </label> <label className={style.form_label} > Пароль: <FormControl required className={style.form_input} type="password" name="password" value={formFields.password} onChange={handleChange} /> </label> На теги правда не смотри, тут использовал библиотеки бустрапа.

0

14.04.2022

Станислав Алимпиев · Accepted Answer

По идее вот так, не лучший вариант, но рабочий, однако количество состояний можно сократить с 3 до 1, а вызовов с 3 до 1. import { useState, useRef } from "react"; import "./styles.css"; export default function App() { const [value1, setValue1] = useState(); const [value2, setValue2] = useState(); const convert = (e) => { return e.target.value * 2 }; const getValue1 = (e) => { setValue1(e.target.value); setValue2(e.target.value * 2); convert(e); }; const getValue2 = (e) => { setValue2(e.target.value); setValue1(e.target.value * 2); convert(e); }; return ( <div className="App"> <input onChange={getValue1} value={value1}/> <input onChange={getValue2} value={value2} /> </div> ); }

169 похожих чатов

Привет. Подскажите как решить задачу. Есть 2 input. Есть ф-я

3 ответов

Похожие вопросы