编写通用的React输入钩子可以使用自定义钩子来实现。下面是一个简单的示例代码:
import React, { useState } from 'react';
const useInput = (initialValue) => {
const [value, setValue] = useState(initialValue);
const handleChange = (e) => {
setValue(e.target.value);
};
return {
value,
onChange: handleChange,
};
};
const MyComponent = () => {
const firstName = useInput('');
const lastName = useInput('');
return (
Hello, {firstName.value} {lastName.value}!
);
};
export default MyComponent;
在这个示例中,我们定义了一个useInput
自定义钩子,它接受一个初始值作为参数,并返回一个包含value
和onChange
属性的对象。value
用于存储输入框的值,onChange
用于更新输入框的值。
在MyComponent
组件中,我们使用useInput
钩子来创建firstName
和lastName
状态,并将其分别应用到两个输入框。通过使用{...firstName}
和{...lastName}
,我们将value
和onChange
属性分别应用到对应的输入框上。
最后,我们在页面上显示了输入框中的值。
这样,我们就实现了一个通用的React输入钩子,可以方便地在多个输入框中使用,并获取输入框的值。
下一篇:编写通用方法-Java