ReactJS处理组件更改

我有一个呈现表单的ReactJS类，并根据输入状态启用/禁用“提交”按钮 . 如果填写了所有四个字段，则启用“提交”按钮，否则不启用 .

当我使用 React.DOM.Input 创建4个基本输入时，它工作正常，但是，当我从react-widgets添加一个React组件 DateTimePicker 时，我很难做到这一点 .

问题是，由于在选择日期后未调用 valid() 方法，因此永远不会启用“提交”按钮 .

见下面的代码：

DateTimePicker = require('react-widgets/lib/DateTimePicker');
momentLocalizer = require 'react-widgets/lib/localizers/moment'
momentLocalizer(require 'moment')

module.exports = React.createClass
  getInitialState: ->
    date: ''
    project: ''
    description: ''
    duration: ''

  handleChange: (e) ->
      name = e.target.name
      console.log(name);
      console.log(e.target.value);
      @setState "#{ name }": e.target.value

  handleSubmit: (e) ->
      e.preventDefault()
      $.post '/tasks', { task: @state }, (data) =>
        @props.handleNewTask data
        @setState @getInitialState()
      , 'JSON'

  render: ->

    dateChange = (date, dateStr) ->
      name = "date"
      @setState "#{ name }": dateStr

    React.DOM.form
      className: 'form-inline'
      onSubmit: @handleSubmit
      React.DOM.div
        className: 'form-group'
        React.createElement DateTimePicker,
          time: false
          name: 'date'
          value: new Date(@state.date)
          onChange: dateChange
      React.DOM.div
        className: 'form-group'
        React.DOM.input
          type: 'text'
          className: 'form-control'
          placeholder: 'Project'
          name: 'project'
          value: @state.project
          onChange: @handleChange
      React.DOM.div
        className: 'form-group'
        React.DOM.input
          type: 'text'
          className: 'form-control'
          placeholder: 'Description'
          name: 'description'
          value: @state.description
          onChange: @handleChange
      React.DOM.div
        className: 'form-group'
        React.DOM.input
          type: 'number'
          className: 'form-control'
          placeholder: 'Duration'
          name: 'duration'
          value: @state.duration
          onChange: @handleChange
      React.DOM.button
        type: 'submit'
        className: 'btn btn-primary'
        disabled: !@valid()
        'Add'

  valid: ->
      console.log @state
      @state.date && @state.project && @state.description && @state.duration