Question

我正在尝试使用React js将jquery ui datepicker集成到输入文本上，我有这个jsbin，http://jsbin.com/diyifa/edit?html,js。

我有一个名为Datepicker.js的组件

import React from 'react';
import ReactDOM from 'react-dom';
import {UserProfileForm} from 'react-stormpath';

export default class DateInput extends React.Component {
    render() {
        return (
            <input type="text" className="datepicker"/>
        )
    }
}
export default class Calendar extends React.Component {
    componentDidMount: function () {
        $('.datepicker').datepicker();
        render()
        {
            return (
                <DateInput/>
            )
        }
    }
}
ReactDOM.render(
    <Calendar/>, document.getElementById('dpick')
);

我希望在名为PatPage.js的页面中调用此组件

import React from 'react';
import DocumentTitle from 'react-document-title';
import {UserProfileForm} from 'react-stormpath';
import {Calendar} from './Datepicker.js';

<div className="form-group">
    <label id="id_label_dateofbirth" htmlfor="id_field_dateofbirth" className="col-md-6 control-label2">
        <span className="e2bcode" id="E2BCodes">D.2.1</span>Date of Birth
    </label>
    <div className="col-md-3 divhidetxtdpatient" id="showhidemasked">
        <div id="dpick"></div>
    </div>
</div>

（还有更多的代码，但我只是在实现这个时才显示该部分）任何提示它使它工作将不胜感激，我是新的反应JS，谢谢

Answer 1

假设您的构建系统是webpack，您应该使用提供的插件来确保加载$和jQuery ...

new webpack.ProvidePlugin({
  Promise: 'bluebird',
  jQuery: 'jquery',
  $: 'jquery',
  React: 'react'
})

此外，将jquery-ui添加到主entry.js

之前的条目列表中

以下是您大致需要的ES6课程

//DatePicker.js
export default class DatePicker extends React.Component {
  componentDidMount() {
    $(this.refs.input).datepicker();
  }

  componentWillUnmount() {
    $(this.refs.input).datepicker('destroy');
  }

  render() {
    const props = this.props;
    return <input ref="input" type="date" {...props} />
  }
}

//entry.js
import ReactDOM from 'react-dom';
import DatePicker from './DatePicker';

ReactDOM.render(
  <DatePicker 
    value="2015-01-01" 
    onChange={(evt)=>console.log('new date', evt.target.value)} 
  />, 
  document.getElementById('dpick')
)

Answer 2

我疯了以这种方式工作：

Datepicker.js

import React from 'react';

export default class Datepicker extends React.Component {  
  render() {
    return (      
      <input type="text" id="id_field_dateofbirth" className="datepicker form-control" placeholder="DD-MM-YYYY"/>
    );    
  }
}

Calendar.js

import React from 'react';
import Datepicker from './Datepicker';

export default class Calendar extends React.Component {  
  componentDidMount() {
    $('.datepicker').datepicker({
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      yearRange: "-116:+34",
      dateFormat: 'dd/mm/yy'
    });
  } 
  render() {
    return ( 
          <Datepicker />              
    );
  }
}

我从另一个文件中调用我的组件

import Calendar from '../components/Calendar'
.....
.....
<Calendar />

Answer 3

检查jQuery ui datepicker的脚本标签的src属性，也许它指向错误的目的地

将jquery ui datepicker集成到React JS中

3 个答案: