选择和反应

Question

我想在 react 中处理选定的事件，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>

我如何使用这个组件：

<ChosenSelect className="form-chosen-select"
              ref="chosen"
              options={ @state.list }
              onShowingDropdown=@toggleFormState
              onHiddingDropdown=@toggleFormState
              onChange=@change />

但是onHiddingDropdown 阻止onChange 事件，如果我只使用onChange 而没有onHiddingDropdown 一切正常。也许有人遇到过类似的情况？

UPD。发现同样的问题：link，change事件没有来，因为我改变了状态。

Answer 1

我发现了这个技巧：

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

handleHiddingDropdown: ->
  setTimeout =>
    @props.onHiddingDropdown() if @props.onHiddingDropdown
  , 1