Question

我发现有几种方法可以处理带有钩子的用户文本输入。用钩子处理输入的更优选或更合适的方法是什么？您会使用哪个？

1）最简单的钩子可以处理输入，但是您拥有更多的字段，必须编写更多的重复代码。

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

事件：

onChange={event => setPassword(event.target.value)}
onChange={event => setUsername(event.target.value)}

2）与上面的示例类似，但具有动态键名

const [inputValues, setInputValues] = useState({
  username: '', password: ''
});

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
};

事件：

onChange={handleOnChange}

3）useState的替代方法，如ReactJS文档所述，useReducer通常比useState更可取。

const [inputValues, setInputValues] = useReducer(
  (state, newState) => ({ ...state, ...newState }),
  {username: '', password: ''}
);

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ [name]: value });
};

事件：

onChange={handleOnChange}

4）useCallback将返回一个已记忆的回调版本，仅在其中一个依赖项已更改时才会更改。

const [inputValues, setInputValues] = useState({ 
  username: '', password: '' 
});

const handleOnChange = useCallback(event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
});

事件：

onChange={handleOnChange}

Answer 1

是的，您可以使用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.log(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>
    </>
    )
}

Answer 2

这是我的操作方法（假设您的输入必须在表单内）：

我有一个使用的BasicForm组件。

它将所有输入状态存储到一个对象中，并通过单个useState（）调用。

它通过useContext()的{{1}}状态以及一个inputs函数和一个函数onChange()来使输入在首次安装时设置其初始状态。它还传递了onFocus，onBlur，并且具有验证字段的功能，为简化代码，此处未显示。

这样，我可以轻松地创建一个表单，该表单具有所需的任意输入，例如：

setInputInitialState()

BasicForm.js

<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>

TextInput.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> ); }钩子在安装时设置其初始状态。

useEffect()

Answer 3

如何编写可重用的函数以返回输入值...及其本身：

 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}
 </>;

Answer 4

这就是我现在使用的方式：

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

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

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

Answer 5

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>
    )
    
    }

}

Answer 6

您不会在React文档中看到这一点，但是您可能需要考虑像Formik

这样的表单库。

使用React钩子处理输入

6 个答案: