資料結構
網路
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 次瀏覽
廣告