2017-05-11 18 views
0

現在、私はバックボーンでこの機能を持っています。反応を使用して変更イベントをトリガーする方法

onChangeイベントが発生したときにモデルを更新します。このモデルでは、日付フィールドを追加するように反応するの

bindElementToAttribute: function(el, name, eventType) { 
    var that = this; 
    eventType = typeof(eventType) != 'undefined' ? eventType : "change"; 
    $(el).on(eventType, function() { 
     var obj = {}; 
     obj[name] = $(el).val(); 
     that.model.set(obj, {silent: true}); 
     return true; 
    }); 

私は日付ピッカーコンポーネントを使用していますが、私は日付を選択すると、骨格のこの機能は、onChangeイベントをトリガしません。 これはコンポーネントである:私のコンポーネントでhttps://github.com/Hacker0x01/react-datepicker

、私は手動でこれが正常に動作しているが、私は日付ピッカーで新しい日付を選択すると、それは古いを渡す「変更」イベント

handleChange(date) { 
    this.setState({ 
     startDate: date 
    }); 
    $('input[name=release_date]').trigger('change') 
    } 

をトリガー値をモデルに追加します。 onchangeがトリガされると、値はまだ更新されていません。

どうすればこの問題を解決できますか?

おかげでみんな

答えて

1

コンポーネントの再setStateの結果としてレンダリングする前に、したがって、あなたはドムの古い値を取得し、イベントをトリガためと考えられます。これを解決する

つのオプション:

this.setState({ 
    startDate: date 
}, function(){$('input[name=release_date]').trigger('change')}); 

コールバック関数SETSTATEが完了すると実行され、コンポーネントされます。これは次のよう

1.Youは、2番目のパラメータとしてSETSTATEコールバック関数を渡すことができ再レンダリングされます(詳細はこちら:http://reactjs.cn/react/docs/component-api.html#setstate)。

2.Andさらに、コンポーネントにpropとしてコールバック関数を渡し、inputの変更をトリガーする代わりにhandleChangeを実行します。このように:あなたは、あなたのコンポーネントのライフサイクルの特定のポイントで、onChangeCallbackを実行することができます*

handleChange(date) { 
    this.setState({ 
    startDate: date 
    }); 

    this.prop.onChangeCallback(date); 
} 

。どの点を決定するかについてはLifecycle Methodsをお読みください。

+0

これは機能しました。ありがとうございました! –

関連する問題