ReactJS 处理组件更改答案

【问题标题】：ReactJS Handling component changesReactJS 处理组件更改
【发布时间】：2016-01-22 21:29:27
【问题描述】：

我有一个 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

【问题讨论】：

标签： javascript coffeescript reactjs

【解决方案1】：

在您的代码中，@setState 不引用组件 setState。 this 关键字（coffee 中的@）指的是函数所属的对象，如果不属于任何对象，则为窗口对象。

在您的具体情况下，您应该将dateChange 函数移出render 方法，并将您的onChange 回调替换为onChange: @dateChange。这样，您将更新组件的实际状态，而不是 render 方法的成员。不要忘记，在 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
[...]

【讨论】：