使用React钩子处理输入

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

这就是我现在的用法：

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

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

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

Answer 2

是的，你可以用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 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}
 </>;