レンダリング時に反応するonClick関数が反応する


209

子コンポーネントに2つの値を渡します。

  1. 表示するオブジェクトのリスト
  2. 削除機能。

私は.map()関数を使用してオブジェクトのリストを表示しますが(reactチュートリアルページにある例のように)、そのコンポーネントのボタンはonClick関数をレンダリング時に起動します(レンダリング時に起動しないでください)。私のコードは次のようになります:

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

私の質問はonClick、レンダリングで関数が起動するのはなぜですか?

回答:


526

onClickに関数を渡す代わりにその関数を呼び出すので、その行を次のように変更します。

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> ES6で導入され、React 0.13.3以降でサポートされるArrow Functionと呼ばれます。


1
これをコーヒースクリプトでどのように行うのですか?
vipin8169 2016年

14
これらの矢印関数の中括弧も回避できます。私がonClick={() => this.props.removeTaskFn(todo)}
信じているの

1
これについてもう少し説明していただけますか?私は人々がそれがベストプラクティスではないと言い続けていますが、ここで何が起こっているのかを()で正確に理解したいと思います=>矢印関数が何であるかを理解していますが、これが何であるかを理解していません(なぜこれが悪いのですか?)
wuno 2017年

@wuno()は無名関数のパラメーターです。パラメータを渡していないため、ここでは空です。()がfunction()の()であると想像してください。render()関数でバインドすることがベストプラクティスではない理由は、すべてのレンダーでコンポーネントに関数を再バインドするためです。これは非常にコストがかかる可能性があります。
ジェイソンダー2017

@LongNguyenこれは私が探しているものです!どうもありがとう
M.Wiśnicki19年

31

関数を呼び出す代わりに、値を関数にバインドします。

this.props.removeTaskFunction.bind(this, todo)

MDN参照:https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind


2
私見と他の多く。望ましくない副作用が発生する可能性があるため、クラスレスまたはバインディングよりもステートレス関数を優先する必要があります。したがって、両方の答えが正しいとしても、一方が他方よりも適切であると私は信じています。
sospedra 2016年

1
レンダリングまたはコンポーネントの他の場所での直接バインディングはお勧めしません。バインディングは常にコンストラクタで行われる必要があります
Hemadri Dasari 2018

15

onClick属性の値は、関数呼び出しではなく関数にする必要があります。

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>

8
レンダー内のイベント呼び出しで匿名関数を使用しないでください。それは別のレンダーをトリガーします
Splynx

4

アロー関数を使用していないがもっと簡単なもののために...私は私のサインアウト関数の後に括弧を追加するときにこれに遭遇しました...

これを交換 <a onClick={props.signOut()}>Log Out</a>

これで<a onClick={props.signOut}>Log Out</a>...!😆


実際、それは私にはまったく効果がありません。私は関数を渡しましたが、括弧を追加することはありませんでした。これが'19年2月以降に変更されたかどうかはわかりませんが、Long NguyenやVishal Bishtの回答のように関数を割り当てると、問題が解決しました。
ビットシフト

4

JSXはReactJSと一緒に使用されます。HTMLに非常によく似ており、プログラマーがHTMLを使用しているように感じますが、最終的にはJavaScriptファイルに変換されます。

forループを記述し、関数を{this.props.removeTaskFunction(todo)}として指定すると、ループがトリガーされるたびに関数が実行されます。

この動作を停止するには、関数をonClickに戻す必要があります。

ファットアロー関数には、バインドプロパティとともに隠されたreturnステートメントがあります。したがって、JavaScriptも関数を返すことができるため、関数はOnClickに戻ります !!!!!

使用する -

onClick={() => { this.props.removeTaskFunction(todo) }}

つまり

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);

1

JSXは中括弧でJavaScript式を評価します

この場合、this.props.removeTaskFunction(todo)が呼び出され、戻り値が割り当てられますonClick

あなたが提供しなければならないのonClickは機能です。これを行うには、値を無名関数でラップできます。

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});

1

私は同様の問題がありました、私のコードは:

function RadioInput(props) {
    return (
    <div className="form-check form-check-inline">
        <input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
        <label className="form-check-label" htmlFor={props.id}>{props.label}</label>
    </div>
    );
  }
class ScheduleType extends React.Component
{
    renderRadioInput(id,label)
    {
        id = "inlineRadio"+id;
        return(
            <RadioInput
                id = {id}
                label = {label}
                onClick = {this.props.onClick}
            />
        );

    }

どこにあるべきか

onClick = {() => this.props.onClick()}

RenderRadioInput

それは私のために問題を修正しました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.