2016-05-19 11 views
0

反応で選択したイベントを処理したい場合は、exampleプレーンjsでどのように動作するのですか。選択した反応

だから私が作成し、選択されたためにコンポーネントを反応させる:

@ChosenSelect = React.createClass 
    propTypes: 
    options: React.PropTypes.array 

    componentWillMount: -> 
    @setState 
     selected: @props.value 

    componentDidMount: -> 
    select = $(ReactDOM.findDOMNode(@refs.select)) 

    $(select).chosen() 
     .on('chosen:showing_dropdown', @props.onShowingDropdown) 
     .on('chosen:hiding_dropdown', @props.onHiddingDropdown) 
     .change @props.onChange 

    renderOption: (option) -> 
    <option key={option.value} value={option.value}>{option.label}</option> 

    renderSelectOptions: -> 
    if @props.options 
     ops = @props.options.map (option) => 
     if option.type == 'group' 
      <optgroup label={option.name}> 
      { 
       option.items.map((item) => 
       @renderOption(item)) 
      } 
      </optgroup> 
     else 
      @renderOption option 

    render: -> 
    selectProps = $.extend({}, @props, ref: 'select') 
    <select {...selectProps} value={ @state.selected }> 
     {@props.children} 
     {@renderSelectOptions()} 
    </select> 

私は、このコンポーネントを使用する方法:私はonHiddingDropdownなしのみonChangeを使用すると、すべてが正常に動作している場合、

<ChosenSelect className="form-chosen-select" 
       ref="chosen" 
       options={ @state.list } 
       [email protected] 
       [email protected] 
       [email protected] /> 

しかしonHiddingDropdownブロックonChangeイベントを。多分誰かが同様に直面したのだろうか?

UPD。同じ問題が見つかりました:linkchange私は状態を変更したため、イベントが来ません。

+0

明確化を? – aug

+0

選択した状態に応じて、クラスを追加/削除します。 –

答えて

0

私はこのトリックが見つかりました:あなたは `onHiddingDropdown`が必要なのか、なぜ

$(select).chosen() 
    .on('chosen:showing_dropdown', @props.onShowingDropdown) 
    .on('chosen:hiding_dropdown', @handleHiddingDropdown) 
    .change @props.onChange 

handleHiddingDropdown: -> 
    setTimeout => 
    @props.onHiddingDropdown() if @props.onHiddingDropdown 
    , 1 
関連する問題