ReactJS處理組件更改

我有一個ReactJS類正在渲染表單，並根據輸入狀態啓用/禁用Submit按鈕。如果全部四個字段都填寫完畢，則提交按鈕被啓用，否則不是。ReactJS處理組件更改

它正常工作時，我有React.DOM.Input創建4次基本投入，但是，我努力使這項工作將來自反應的小部件一個陣營組件的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: [email protected]() 
     'Add' 

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

來源

2015-10-23 JK Simmons

在你的代碼，@setState並不是指組件setState。 this關鍵字（咖啡中的@）指的是函數所屬的對象，或者窗口對象（如果它不屬於任何對象）。

在您的具體情況下，您應該將dateChange函數移出render方法，並用onChange: @dateChange替換onChange回調函數。這樣，您將更新組件的實際狀態，而不是渲染方法的成員。不要忘記，在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 
[...]

來源

2015-10-26 14:31:00 Liyali

ReactJS處理組件更改

回答

相關問題