Reactの小道具関数にパラメーターを渡す

ハカンカラドゥマン

私がやろうとしていることを示すために、2つのサンプルコンポーネントを作成しました。同じクラスからの呼び出しの場合、次のようにできます。

onClick={this.myFunc.bind(this, param1, param2)}

'this'のバインディングをいじる必要なしに、ステートレスコンポーネントから同じことを行うにはどうすればよいですか。

onClick={props.onClick['need to add params']}

import React from 'react';
 
class BigComponent extends React.Component{
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick(param1, param2){
        // do something with parameters
    }

    render(){
        return(
            <div>
                <SmallComponent handleClick={this.handleClick}/>
            </div>
        );
    }
}

function SmallComponent(props){
	return(
        <div>
            <button onClick={ () => {props.handleClick('value_1', 'value_2')}}></button>
            <button onClick={ () => {props.handleClick('value_3', 'value_4')}}></button> 
            {/* how to do above without arrow functions, because I read that it's not optimized*/}
        </div>
    );
}

pkuzhel

内にコールバックを追加しますthis.myFunc

this.myFunc = event => (param1, param2) => { ... do stuff }

トップレベルのコンポーネントでは、次のことができます。

handleClick={this.myFunc}

あなたの子供では、ただしてください:

onClick={handleClick(param1, param2)}

これがお役に立てば幸いです。

または、次の手順を実行できます。

function SmallComponent(props){
    const handleClick = (param1, param2) => (event) => props.handleClick(param1, param2);

    return(
        <div>
            <button onClick={handleClick(param1, param2)}></button>
            ...
    );
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

パラメータ付きの関数を小道具として渡し、その関数を小道具として参照することは可能ですか?

分類Dev

reactjsの小道具を介してパラメーター付きの関数を渡す

分類Dev

コンストラクターでのReactバインド、パラメーターを小道具に渡す方法

分類Dev

小道具内の矢印関数内のパラメーターにアクセスできません(React Native)

分類Dev

NPMパッケージから関数に小道具を渡す

分類Dev

TypeScriptを使用した関数パラメーターの小道具の破棄

分類Dev

反応する。パラメータを小道具として持つ関数を渡すにはどうすればよいですか?

分類Dev

React Hooksを使用して、小道具やその他のパラメーターを機能に渡すにはどうすればよいですか?

分類Dev

ReactのonChange関数に追加のパラメーターを渡す方法

分類Dev

関数パラメータを別の関数に渡す

分類Dev

React:マップ内の関数にパラメーターを渡す

分類Dev

SQL関数に複数のパラメーターを渡す

分類Dev

'noop' [lodash]のデフォルトパラメータは関数の小道具に必要ですか?

分類Dev

静的な小道具と動的なパラメータを複数のコンポーネントを含むVueルートに渡す

分類Dev

別の関数にパラメーターを渡す

分類Dev

関数の必須パラメーターにnullを渡す

分類Dev

Fsharp:関数にN個のパラメーターを渡す

分類Dev

2番目のパラメーターを関数に渡す

分類Dev

stat関数に追加のパラメーターを渡す

分類Dev

Jquery:.click()の関数にパラメーターを渡す

分類Dev

Javascript関数に2つのパラメーターを渡す

分類Dev

Ajaxの関数にパラメーターを渡す

分類Dev

Pythonの関数にパラメータを動的に渡す

分類Dev

React.js。関数本体でパラメーター(および小道具は引数になります)または参照小道具を使用してメソッドを作成する方が良いですか?

分類Dev

React Passに関連するデータ(小道具)を子孫に渡す

分類Dev

React:TypeScriptジェネリック、パラメータータイプを関数から自動切り替え(小道具としての関数)

分類Dev

パラメータ付きの関数をVoidCallbackに渡す

分類Dev

空のパラメータをPython関数に渡す方法は?

分類Dev

MaximaCASの関数にパラメータを渡す

Related 関連記事

  1. 1

    パラメータ付きの関数を小道具として渡し、その関数を小道具として参照することは可能ですか?

  2. 2

    reactjsの小道具を介してパラメーター付きの関数を渡す

  3. 3

    コンストラクターでのReactバインド、パラメーターを小道具に渡す方法

  4. 4

    小道具内の矢印関数内のパラメーターにアクセスできません(React Native)

  5. 5

    NPMパッケージから関数に小道具を渡す

  6. 6

    TypeScriptを使用した関数パラメーターの小道具の破棄

  7. 7

    反応する。パラメータを小道具として持つ関数を渡すにはどうすればよいですか?

  8. 8

    React Hooksを使用して、小道具やその他のパラメーターを機能に渡すにはどうすればよいですか?

  9. 9

    ReactのonChange関数に追加のパラメーターを渡す方法

  10. 10

    関数パラメータを別の関数に渡す

  11. 11

    React:マップ内の関数にパラメーターを渡す

  12. 12

    SQL関数に複数のパラメーターを渡す

  13. 13

    'noop' [lodash]のデフォルトパラメータは関数の小道具に必要ですか?

  14. 14

    静的な小道具と動的なパラメータを複数のコンポーネントを含むVueルートに渡す

  15. 15

    別の関数にパラメーターを渡す

  16. 16

    関数の必須パラメーターにnullを渡す

  17. 17

    Fsharp:関数にN個のパラメーターを渡す

  18. 18

    2番目のパラメーターを関数に渡す

  19. 19

    stat関数に追加のパラメーターを渡す

  20. 20

    Jquery:.click()の関数にパラメーターを渡す

  21. 21

    Javascript関数に2つのパラメーターを渡す

  22. 22

    Ajaxの関数にパラメーターを渡す

  23. 23

    Pythonの関数にパラメータを動的に渡す

  24. 24

    React.js。関数本体でパラメーター(および小道具は引数になります)または参照小道具を使用してメソッドを作成する方が良いですか?

  25. 25

    React Passに関連するデータ(小道具)を子孫に渡す

  26. 26

    React:TypeScriptジェネリック、パラメータータイプを関数から自動切り替え(小道具としての関数)

  27. 27

    パラメータ付きの関数をVoidCallbackに渡す

  28. 28

    空のパラメータをPython関数に渡す方法は?

  29. 29

    MaximaCASの関数にパラメータを渡す

ホットタグ

アーカイブ