React では、高階関数の定義は、指定された関数によって受け取られたパラメーターが別の関数である場合、または呼び出しの戻り値が依然として関数である場合、指定された関数は高階関数と呼ばれます。 -order関数 Promise、setTimeout、arr.map()などがあります。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
高次関数: 関数が次の 2 つの仕様のいずれかを満たしている場合、その関数は高次関数です。
1. 関数 A が受け取ったパラメータが関数の場合、A は高階関数と呼ぶことができます。
2. 関数 A の戻り値が関数である場合、A は高階関数と呼ぶことができます。
一般的な高階関数には、Promise、setTimeout、arr.map() などが含まれます。
例は次のとおりです。
以下の場合は高階関数です
saveFormData = (event)=>{return ()=>{console.log('@');}}<form onSubmit={this.handleSubmit}>Username:<input onChange={this.saveFormData('username' ) } type="text" name="username"/>パスワード: <input onChange={this.saveFormData('password')} type="password" name="password"/><button>ログイン</button> < /フォーム>a. this.saveFormData('username') は、saveFormData をコールバックとしてではなく、saveFormData の戻り値を onChange のコールバックとして使用します。
b. this.saveFormData('username') を使用する場合、saveFormData 割り当て関数は onChange に何かを返す必要があります。saveFormData 割り当て関数の戻り値 (返される関数) をコールバックとして onChange に渡します。
c. そこで、saveFormData の return 関数で「@」記号を出力すると、出力された値が onChange に返され、入力ボックスへの入力中に @ 記号が出力されます。
d. saveFormData によって渡される dataType は、実際にはユーザー名とパスワードです。
e. 入力時に呼び出すのは return 関数である必要があり、React は呼び出し時にイベントを渡すのに役立ち、出力した値を取得できます。
saveFormData = (dataType)=>{// console.log(dataType);return (event)=>{// console.log('@');console.log(dataType,event.target.value);}}
f. 内容を出力するには、setState を使用して状態に保存します。
this.setState({[dataType]:event.target.value})