ReactJS Обработка изменений компонента

Question

У меня есть класс ReactJS, который отображает форму и включает/отключает кнопку «Отправить» на основе состояний входов. Если все четыре поля заполнены, тогда кнопка «Отправить» включена, иначе это не так.

Он отлично работает, когда у меня есть 4 основных входа, созданные с React.DOM.Input, однако, я изо всех сил, чтобы сделать эту работу при добавлении Реагировать компонента 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 

Answer 1

В коде @setState не относится к компоненту setState. Ключевое слово(@ в кофе) относится к объекту, которому принадлежит функция, или к объекту окна, если он не принадлежит ни одному объекту.

В вашем конкретном случае вы должны переместить функцию 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 
[...]