#javascript #html #reactjs #event-handling #dom-events
#язык JavaScript #HTML #реагирует на #обработка событий #дом-события
Вопрос:
Есть ли способ установить несколько частей состояния с помощью одной функции прослушивания событий. Я пытаюсь получить от пользователя информацию, которая будет обновлять в режиме реального времени другие разделы моего приложения. Я использую метод const [state, setState ] = useState()
.
Я бы хотел, чтобы каждый ввод запускал функцию, которая обновит соответствующие части состояния, но я не могу понять, как это сделать.
import React, {useState} from 'react' import { Container } from 'react-bootstrap' const HBB = () =gt; { const [planName ,setPlanName ] = useState('') const [planType ,setPlanType ] = useState('') const [HBBInstallation ,setHBBInstallation ] = useState(false) const [HBBInstallationActivationDate, setHBBInstallationActivationDate ] = useState() const [HBBInstallationSlot , setHBBInstallationSlot ] = useState() const [planOptions, setPlanOptions] = useState() const [planMonthlyCost, setPlanMonthlyCost] = useState(0) const handleChange = (e) =gt; { let proToUpdate = e.target.name; let value = e.target.value; let test = e.target.id; //set the state of the element eg setPlanName(value) } return ( lt;Containergt; lt;divgt; lt;div className="form-group"gt; lt;select name="planName" id="setPlanName" value={planName} className="plan w-40" onChange={handleChange}gt; lt;option value="*"gt;Planlt;/optiongt; lt;option value="TEST"gt;TESTlt;/optiongt; lt;/selectgt; lt;select name="planType" className="plan w-40" value={planType} onChange={handleChange}gt; lt;option value="*"gt;Standardlt;/optiongt; lt;option value="pro"gt;Prolt;/optiongt; lt;option value="extra"gt;Extralt;/optiongt; lt;/selectgt; lt;/divgt; lt;div className="form-group"gt; lt;label htmlFor="No"gt;No Installation Neededlt;/labelgt; lt;input name="HBBinstallation" id="No" type="radio" className="plan" value="No" checked onChange={handleChange}/gt; lt;label htmlFor="Yes"gt;Installation neededlt;/labelgt; lt;input name="HBBinstallation" type="radio" className="plan" value="Yes"/gt; lt;/divgt; lt;div className="form-group"gt; lt;input name="HBBInstallationActivationDate" type="text" className="textInput plan" value={HBBInstallationActivationDate} placeholder="Installation/Activation date" onChange={handleChange}/gt; lt;select name="HBBinstallationSlot" className="plan"gt; lt;option value="*" defaultValuegt;Choose slot--lt;/optiongt; lt;option value="am"gt;AMlt;/optiongt; lt;option value="pm"gt;PMlt;/optiongt; lt;/selectgt; lt;/divgt; lt;div className="form-group"gt; lt;input name="planMonthlyCost" type="number" className="plan" value={planMonthlyCost} placeholder="Plan Monthly Cost" onChange={handleChange}/gt; lt;/divgt; lt;/divgt; lt;/Containergt; ) } export default HBB
Можно ли передать setState
метод через onChange
attr? Нужно ли мне будет писать функцию для каждого setState
ввода?
Ответ №1:
Если вы используете useReducer
hook, вы можете легко обрабатывать несколько состояний, как показано ниже.
import React, { useReducer } from "react"; import { Container } from "react-bootstrap"; const useReducerState = (initialState = {}) =gt; { const reducer = (prev, next) =gt; ({ ...prev, ...next }); return useReducer(reducer, initialState); }; const HBB = () =gt; { const [state, setState] = useReducerState({ planName: "", planType: "", HBBInstallationActivationDate: 0, HBBInstallation: false, HBBInstallationSlot: [], planOptions: [], planMonthlyCost: 0 }); const handleChange = (e) =gt; { let proToUpdate = e.target.name; let value = e.target.value; let test = e.target.id; setState({ [proToUpdate]: value }); }; const { planName, planType, HBBInstallationActivationDate, HBBInstallation, HBBInstallationSlot, planOptions, planMonthlyCost } = state; return ( lt;Containergt; lt;divgt; lt;div className="form-group"gt; lt;select name="planName" id="setPlanName" value={planName} className="plan w-40" onChange={handleChange} gt; lt;option value="*"gt;Planlt;/optiongt; lt;option value="TEST"gt;TESTlt;/optiongt; lt;/selectgt; lt;select name="planType" className="plan w-40" value={planType} onChange={handleChange} gt; lt;option value="*"gt;Standardlt;/optiongt; lt;option value="pro"gt;Prolt;/optiongt; lt;option value="extra"gt;Extralt;/optiongt; lt;/selectgt; lt;/divgt; lt;div className="form-group"gt; lt;label htmlFor="No"gt;No Installation Neededlt;/labelgt; lt;input name="HBBinstallation" id="No" type="radio" className="plan" value="No" checked onChange={handleChange} /gt; lt;label htmlFor="Yes"gt;Installation neededlt;/labelgt; lt;input name="HBBinstallation" type="radio" className="plan" value="Yes" /gt; lt;/divgt; lt;div className="form-group"gt; lt;input name="HBBInstallationActivationDate" type="text" className="textInput plan" value={HBBInstallationActivationDate} placeholder="Installation/Activation date" onChange={handleChange} /gt; lt;select name="HBBinstallationSlot" className="plan"gt; lt;option value="*" defaultValuegt; Choose slot-- lt;/optiongt; lt;option value="am"gt;AMlt;/optiongt; lt;option value="pm"gt;PMlt;/optiongt; lt;/selectgt; lt;/divgt; lt;div className="form-group"gt; lt;input name="planMonthlyCost" type="number" className="plan" value={planMonthlyCost} placeholder="Plan Monthly Cost" onChange={handleChange} /gt; lt;/divgt; lt;/divgt; lt;/Containergt; ); }; export default HBB;
Затем вы можете использовать функцию setState для изменения всех значений состояния. Для использования этого метода вам всегда нужно установить начальное значение для состояния.
Комментарии:
1. большое спасибо. Я действительно не понимаю этого, но это работает и кажется хорошей вещью для изучения. Спасибо за вашу помощь
2. спасибо за все вышесказанное. Вы знаете, как бы я заставил это работать с переключателями? Все остальное работает отлично, но я не могу обновить радио
3. NVM Я понял проблему