Reactjs 使用React钩子处理输入

我发现有几种方法可以用钩子处理用户的文本输入。用钩子处理输入的更好或更合适的方法是什么？你会用哪一种

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}

onChange={handleOnChange}

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}

onChange={handleOnChange}

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}

onChange={handleOnChange}

onChange={handleOnChange}

我是这样做的（假设您的输入必须在表单中）：

我有一个我使用的基本表单组件

它将对象中的所有输入状态存储到单个useState（）调用中

它通过

useContext（）

输入状态以及

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>

---

写一个返回输入值的可重用函数怎么样。。。以及

本身：

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

函数useInput（{type/*…*/}）{
const[value，setValue]=useState（“”）；
const input=setValue（e.target.value）}type={type}/>；
返回[值，输入]；
}

然后可以用作：

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

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

const[username，userInput]=useInput（{type:'text}）；
const[password，passwordInput]=useInput（{type:'text}）；
返回
{userInput}->{username}

{passwordInput}->{password}
;

是的，您可以使用useState（）处理react钩子

import React，{useState}来自“React”
导出默认值（）=>{
const[fName，setfName]=useState（“”）；
const[lName，setlName]=useState（“”）；
const[phone，setPhone]=使用状态（“”）；
const[email，setEmail]=useState（“”）；
const submitValue=（）=>{
常数frmdetails={
“名字”：fName，
“姓氏”：lName，
“电话”：电话，
“电子邮件”：电子邮件
}
控制台日志（frmdetails）；
}
返回(

setfName（e.target.value）}/>
setlName（e.target.value）}/>
设置电话（e.target.value）}/>
setEmail（e.target.value）}/>
提交
)
}

我现在就是这样使用的：

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

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

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

const[inputValue，setInputValue]=React.useState（“”）；
const onChangeHandler=事件=>{
setInputValue（event.target.value）；
};

函数应用程序（）{
const[name，setName]=useState（“”）；
const[istrue，Setistrue]=useState（false）；
const[lastname，setLastname]=useState（“”）；
函数handleclick（）{
Setistrue（真）；
}
返回(
{istrue？{name}{lastname}：
setName（e.target.value）}/>
setLastname（e.target.value）}/>
提交
}
)
}
}
< /代码> 您不会在反应文档中看到这一点，但是您可能想在第二个参数（依赖数组）的情况下考虑像
这样的表单库是没有意义的。IMHO
useReduce
比
useState
更灵活，更不容易出错。对于objects，请在返回后对语法进行更多说明。“这对我来说似乎很新鲜。”JonathanAkweteyOkine如果你说的是第二次返回，那就是React片段的简写语法。另请参见此处：@Marco->箭头只是呈现为文本，没有任何特殊语法。@jonaswillms是否会在每次调用时重新绑定onChange侦听器？@duhaime是的，会。这段代码不是“准备好复制粘贴”的，它是为了演示如何在最简单的示例中使用钩子。当然，您可以添加一个
useCallback
来处理此问题。我们将对此进行注释。这是我感觉最简单的方式。此外，丹·阿布拉莫夫在这里介绍胡克时也是这样演示的：@25:25这是一种非常简单和有机的理解方式。谢谢。您应该用
useCallback
包装
onChangeHandler
。@ncesar当前您的代码在该组件的每个渲染上创建一个新的
onChangeHandler
。如果将此处理程序向下传递给另一个组件或元素，则prop的值（此处
onChange
）将更改。这会使React重新呈现已记忆的组件或更改附加到
元素的事件处理程序。但这是不必要的工作
useCallback
在每个渲染上为您提供相同的实例，只要它的非依赖项发生更改，
setInputValue
就是其中之一。这意味着
onChange
的值不会改变->不重新渲染或更新事件处理程序。@ncesar好的，更新一下：看起来没那么简单。仅调用
useCallback（）
的性能比在这种情况下节省的性能要高。它仅与包装在
React.memo（）
中的子组件结合使用。