选择和反应

Question

我想在react中处理选择的事件，示例如何在普通JS中工作。

因此我为选择创建了react组件：

@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 />

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