0

小道具を介して組み込みの反応関数を渡し、状態を設定しようとしていますがthis、未定義になります!

私はこのようなことを試しました：

index.js

let somefun = function(){
    this.setState({myvar:1});
}

ReactDom.render(<someComponent body={<someOtherComponent1 componentWillUpdate={somefun}/>} />, document.getElementById('someValidID'));

someOtherComponent1.js

React.createElement( someOtherComponent1, { "className": "someclass"} )

私の問題は、組み込み関数を渡すたびに発生します。つまり、react プロトタイプに存在する関数thisは常に未定義です。

小道具を介して組み込み関数を送信するにはどうすればよいですか?

4

2 に答える 2

1

関数に慣れ、this関数を渡す際の非常に一般的な問題。

tl;drsetState onを呼び出すにthisは、this状態を更新する必要があるコンポーネント内で呼び出す必要があります。コンポーネントの外で呼び出しています。

someFunは、その中の関数を呼び出す新しい関数ですthis。問題は、そのコンテキストでthisは、が参照でsomeFunあり、コンポーネント インスタンスではないことです。そこにa を入れconsole.log(this)て見てください。

あなたのシナリオonComponentWillUpdateでは、コンポーネントの外側で宣言するのではなく、コンポーネント内の関数にする必要があると思います。

render: function() {
  return (
    <someOtherComponent1 onComponentWillUpdate={function(nextProps, nextState) {
       // do something here
      }}
    />
  )

ただし、子コンポーネントで実際にその関数を呼び出す必要があることを忘れないでください。

// in someOtherComponent1
componentWillUpdate: function(nextProps, nextState) {
  // do something
  this.props.onComponentWillUpdate(nextProps, nextState)
}
于 2016-06-10T11:02:44.060 に答える
0 
ReactDom.render(<someComponent body={<someOtherComponent1 yourFn={somefun}/>} />, document.getElementById('someValidID'));

そして内部コンポーネント

this.props.yourFn()
于 2016-06-10T11:02:45.033 に答える