数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究ReactJS 中自定义钩子
在本文中，我们将学习如何在 ReactJS 中定义自定义钩子。
所有规则和使用指南与预定义的 ReactJS 钩子相同，例如 −
在顶级调用钩子
仅从 React 函数中调用钩子
示例
在此示例中，我们将构建一个输入验证器应用程序，它将根据自定义钩子中用户定义的条件显示一些文本。
App.jsx
import React from 'react';
import useForm from './CustomHook';
const App = () => {
const input = useForm();
return (
<div>
<input onChange={input.onChange} value={input.value} />
{input.valid ? 'Welcome to TutorialsPoint' : 'Try again'}
</div>
);
};
export default App;CustomHook.jsx
import React, { useState } from 'react';
const useForm = () => {
const [val, setVal] = useState('');
const [valid, setValid] = useState(false);
const inputHandler = (e) => {
setVal(e.target.value);
e.target.value === 'TutorialsPoint' ? setValid(true) : setValid(false);
};
return { value: val, onChange: inputHandler, valid };
};
export default useForm;在上面的示例中，当用户在输入字段中键入时，将调用自定义钩子，根据某些条件确定文本是否有效。
输出
这将产生以下结果。
更新于： 2021-03-18
358 次浏览
广告