1.クラス
クラスを使用する場合、次の形式の入力値を格納する状態で複数のキー値を作成します
。
state={
name: "",
idType: "",
personId: "",
tel: "",
mobile: "",
email: "",
dwsx: "",
province: "",
city: "",
serviceType: "",
status: "",
...
}
もちろん、たくさんあるかもしれません、そしてあなたは状態の値を変えるためにパブリックメソッドを書くことができます：
// 输入框 输入
inputName = (type, e) => {
// 清空 input 和下拉框单选
if (!e) {
let tempData = {
}
tempData[type] = ''
this.setState(tempData)
return false
}
let tempData = {
}
if (e.target) {
tempData[type] = e.target.value
} else {
tempData[type] = e
}
this.setState(tempData)
}
最初の値は、状態のプロパティキーであり、フォームにバインドされた値です。2番目の値はイベントオブジェクトです。イベントオブジェクトを使用して、onChangeイベントによって適応された値を取得します。
使用する：
<Input placeholder="请输入name" value={
name} title='name' onChange={
(e) => this.inputName('name', e.target.value)} />
この時点で、onChangeイベントの再利用を実現しました。状態のキー値を適応させるために、各フォームにイベントを追加する必要はありません。上記の割り当て方法（inputName）は、任意のフォーム要素（テキスト、選択、チェックボックスなど）に使用されます。
2.機能的なフック
通常、更新する必要のある状態が少ない場合は、useStateを直接使用できますが、フォーム要素が多い場合は、useStateの記述に問題が生じるため、useStateの代わりに使用します。useReducerは主に使用されます。コンポーネントの状態を更新します。
同様に、これを使用する方法を知る必要があります。
使用する：
reactにuseReducerフックを導入します。
import React, {
useReducer} from 'react'
最初のパラメーターはアクション関数であり、2番目のパラメーターはレデューサーの初期状態です。
let initialState = {
name: "",
idType: "",
personId: "",
tel: "",
mobile: "",
email: "",
dwsx: "",
province: "",
city: "",
serviceType: "",
status: "",
}
const reducerFun = (state, init) => {
let obj = {
}
obj[init.key] = init.value
switch (init.type) {
case "changeValue":
return {
...state, ...obj };
case "getDetails":
return {
...state, ...init.obj }
case "resetValue":
return initialState;
default:
return state
}
}
changeValueは、単一の状態を変更するための識別子です。getDetailsは、
表示を返すときに使用でき、もう1つのobjを直接渡すだけです
。resetValueは、デフォルト値の識別子をリセットするために使用されます。
レデューサーを作成します。
const [state, dispatch] = useReducer(reducerFun, initialState);
let {
name}=state;
stateは状態オブジェクトであり、initialStateのすべてのキーと値のペアが含まれます。dispatch
はオブジェクトの状態を変更するトリガー関数であり、対応するアクションをトリガーして状態の状態を動的に変更します。フックは自動的に役立ちます。レンダリングします。
ページ：
<RSInput title="节点名称" placeholder="请输入" value={
name} onChange={
(e) => {
inputName('name', e) }} />
inputName関数は、主にレデューサーの状態を更新するために使用されます。
// 输入框输入
const inputName = (key, e) => {
e.persist && e.persist();
if (e.target) {
dispatch({
type: 'changeValue', key, value: e.target.value })
} else {
dispatch({
type: 'changeValue', key, value: e })
}
}
もちろん、要素が少ない場合は、結局useStateを使おうとすると便利です。useReducerは単なるソリューションであり、useStateを引き続き使用できます。
その他の記事
1.フックはtoDoListを実装します
2.フックは左加算と右減算を実装
します3.Reactは複数行の入力ボックスの追加を実装します（行をクリックして行を追加します）
4。Reactページジャンプは前のページのすべてのリクエストをキャンセルします
5.Reactは協力しますaxiosリクエストインターセプト検証セッションでは、403はログインページにジャンプします
。6 。フックはcreateStore、Provider、useSelector、useDispatchを使用して接続機能を実装します
。7。フックはuseReducer、createContext、useContextを使用して、グローバル状態管理と同様にモジュールデータ共有を実現します。グローバル管理にはお勧めしません
Liuqing
见贤思齐焉，见不贤内自省