javascript - ReactJS 处理组件更改

Question

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

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

问题是“提交”按钮永远不会启用，因为选择日期后不会调用 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

Answer 1

在您的代码中，@setState 并不引用组件setState。 this 关键字(coffee 中的 @)指的是函数所属的对象，如果不属于任何对象，则指的是 window 对象。

在您的具体情况下，您应该将 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
[...]