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处理组件更改

回答

相关问题