Обработка ввода с помощью хуков React

Вот как я это делаю (при условии, что ваши входные данные должны быть внутри формы):

У меня есть компонент BasicForm, который я использую.

Он сохраняет все входные данные в объект в одном вызове useState().

Он проходит через useContext() состояние inputs вместе с функцией onChange() и функцией setInputInitialState(), чтобы входы устанавливали свое начальное состояние при первом монтировании. Он также передает onFocus, onBlur и имеет функции для проверки полей, которые я не показываю здесь, чтобы упростить код.

Таким образом, я могу легко создать форму с любым количеством входных данных, например:

<BasicForm
      isSubmitting = {props.isSubmitting}
      submitAction = { (formState) =>
        props.doSignIn(formState) }
    >
      <TextInput
        type='email'
        label='Email'
        name='email'
        placeholder='Enter email...'
        required
      />
      <TextInput
        type='password'
        label='Password'
        name='password'
        placeholder='Enter password...'
        min = {6}
        max = {12}
        required
      />
      <SubmitButton
        label='Login'
      />
    </BasicForm>

BasicForm.js

import FormContext from './Parts/FormContext';

function BasicForm(props) {

  const [inputs, setInputs] = useState({});

  function onChange(event) {
    const newValue = event.target.value;
    const inputName = event.target.name;
    setInputs((prevState)=> {
      return({
        ...prevState,
        [inputName]: {
          ...prevState[inputName],
          value: newValue,
          dirty: true
        }
      });
    });
  }

  function setInputInitialState(
    inputName,
    label='This field ',
    type,
    initialValue = '',
    min = false,
    max = false,
    required = false) {

    const INITIAL_INPUT_STATE = {
      label: label,
      type: type,
      onFocus: false,
      touched: false,
      dirty: false,
      valid: false,
      invalid: false,
      invalidMsg: null,
      value: initialValue,
      min: min,
      max: max,
      required: required
    };

    setInputs((prevState) => {
      if (inputName in prevState) {
        return prevState;
      }
      return({
        ...prevState,
        [inputName]: INITIAL_INPUT_STATE
      });
    });

  }

return(
    <FormContext.Provider value = {{
      onChange: onChange,
      inputs: inputs,
      setInputInitialState: setInputInitialState,
    }}>
      <form onSubmit = {onSubmit} method='POST' noValidate>
        {props.children}
      </form>
    </FormContext.Provider>
  );
}

TextInput.js

Входные данные используют хук useEffect(), чтобы установить их начальное состояние при монтировании.

function TextInput(props) {

  const formContext = useContext(FormContext);

  useEffect(() => {
    console.info('TextInput useEffect...');
    formContext.setInputInitialState(
      props.name,
      props.label,
      props.type,
      props.initialValue,
      props.min,
      props.max,
      props.required
    );
  },[]);

  return(
      <input
        type = {props.type}
        id = {props.name}
        name = {props.name}
        placeholder = {props.placeholder}
        value = {([props.name] in formContext.inputs) ?
                  formContext.inputs[props.name].value
                : props.initialValue || ''}
        onChange = {formContext.onChange}
        onFocus = {formContext.onFocus}
        onBlur = {formContext.onBlur}
      >
      </input>
      </div>
      {([props.name] in formContext.inputs) ?
          formContext.inputs[props.name].invalidMsg && <div><span> {formContext.inputs[props.name].invalidMsg}</span></div>
        : null}
    </div>
  );

...
}

Как насчет того, чтобы написать повторно используемую функцию, которая возвращает входное значение... и саму <input>:

 function useInput({ type /*...*/ }) {
   const [value, setValue] = useState("");
   const input = <input value = {value} onChange = {e => setValue(e.target.value)} type = {type} />;
   return [value, input];
 }

Затем это можно использовать как:

 const [username, userInput] = useInput({ type: "text" });
 const [password, passwordInput] = useInput({ type: "text" });

 return <>
   {userInput} -> {username} <br />
   {passwordInput} -> {password}
 </>;

Да, вы можете обрабатывать хуки реакции с помощью useState()

import React, {useState} from 'react'

export default () => {
    const [fName, setfName] = useState('');
    const [lName, setlName] = useState('');
    const [phone, setPhone] = useState('');
    const [email, setEmail] = useState('');

const submitValue = () => {
    const frmdetails = {
        'First Name' : fName,
        'Last Name' : lName,
        'Phone' : phone,
        'Email' : email
    }
    console.info(frmdetails);
}

return(
    <>
    <hr/>
    <input type = "text" placeholder = "First Name" onChange = {e => setfName(e.target.value)} />
    <input type = "text" placeholder = "Last Name" onChange = {e => setlName(e.target.value)} />
    <input type = "text" placeholder = "Phone" onChange = {e => setPhone(e.target.value)} />
    <input type = "text" placeholder = "Email" onChange = {e => setEmail(e.target.value)} />
    <button onClick = {submitValue}>Submit</button>
    </>
    )
}

Вот как я использую прямо сейчас:

  const [inputValue, setInputValue] = React.useState("");

      const onChangeHandler = event => {
        setInputValue(event.target.value);
      };

      <input
        type = "text"
        name = "name"
        onChange = {onChangeHandler}
        value = {inputValue}
      />

function App(){
    const [name, setName] = useState("");
    const [istrue, Setistrue] = useState(false);
    const [lastname,setLastname]=useState("");
    
    function handleclick(){
       Setistrue(true);
    }
    
    return(
        <div>
            {istrue ? <div> <h1>{name} {lastname}</h1> </div> : 
            <div>
                <input type = "text" placeholder = "firstname" name = "name" onChange = {e =>setName(e.target.value)}/>
                <input type = "text" placeholder = "lastname" name = "lastname" onChange = {e =>setLastname(e.target.value)}/>
               <button  type = "submit" onClick = {handleclick}>submit</button>
            </div>}
        </div>
    )
    
    }

}

Вы не увидите упоминания об этом в документах React, но вы можете рассмотреть библиотеку форм, например Формик.