Блог

Есть ли способ установить несколько частей состояния с помощью одной функции прослушивания событий. Я пытаюсь получить от пользователя информацию, которая будет обновлять в режиме реального времени другие разделы моего приложения. Я использую метод 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 ввода?

Если вы используете 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 для изменения всех значений состояния. Для использования этого метода вам всегда нужно установить начальное значение для состояния.