Javascript ReactJS处理组件更改

我有一个ReactJS类，它正在呈现表单，并根据输入状态启用/禁用Submit按钮。如果所有四个字段都已填写，则“提交”按钮为启用，否则不启用

当我使用

React.DOM.Input

创建了4个基本输入时，它工作得很好，但是，当我从React小部件添加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

---

在您的代码中，

@setState

不引用组件

setState

。

this

关键字（

@

在coffee中）指函数所属的对象，如果它不属于任何对象，则指窗口对象

在您的特定情况下，应该将

dateChange

函数移出

render

方法，并将onChange回调替换为

onChange:@dateChange

。这样，您将更新组件的实际状态，而不是渲染方法的成员。不要忘记，在JavaScript中，函数是一个对象

[...]

dateChange: (date, dateStr) ->
    @setState "date": dateSt

render: ->
    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
[...]

---

在您的代码中，

@setState

不引用组件

setState

。

this

关键字（

@

在coffee中）指函数所属的对象，如果它不属于任何对象，则指窗口对象

在您的特定情况下，应该将

dateChange

函数移出

render

方法，并将onChange回调替换为

onChange:@dateChange

。这样，您将更新组件的实际状态，而不是渲染方法的成员。不要忘记，在JavaScript中，函数是一个对象

[...]

dateChange: (date, dateStr) ->
    @setState "date": dateSt

render: ->
    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
[...]