Question

我有checkin和checkout个字段，我正在尝试将pickaday jquery datepicker集成到我的反应组件pickaday。我将checkin和checkout字段作为父组件中的状态，并将它们作为props传递给我创建的datepicker组件。我所做的是使用componentDidMount初始化datepicker，它按预期工作。这里的问题是我最初只能设置minDate，然后在状态发生变化时从props更新值。

DatePicker.js.jsx

var DatePicker = React.createClass({
//This is a callback to parent component for updating the state
    changeDuration: function (date) {
        this.props.onChange(this.props.name, date);
    },


    componentDidMount: function () {
        var _self = this;

        var picker = new Pikaday({
            field: document.getElementById(this.props.name),
            format: 'D MMM YYYY',
            onSelect: function () {
                _self.changeDuration(this.getMoment().toDate())
            },
            minDate: this.props.minDate
        });
    },


    render: function () {
        return (
            <input type="text" id={this.props.name} defaultValue={this.props.value}/>
        )
    }
});

在父组件中，我像这样调用上面的组件（minDate我传递只能在初始加载时工作，之后不工作？）

          {/*Checkin and checkout dates*/}
            <div className="col s12 m6 l6 rd-custom-input">
                <DatePicker name={'checkIn'} value={this.props.checkIn}
                            onChange={this.handleNamedChange} minDate={this.props.checkIn}/>
            </div>
            <div className="col s12 m6 l6 rd-custom-input">
                <DatePicker name={'checkOut'} value={this.props.checkOut}
                            onChange={this.handleNamedChange} minDate={this.props.checkIn}/>
            </div>

我怀疑componentDidMount在date上选择datepicker时更新状态的错误位置。有人能告诉我这里有什么问题吗？

Answer 1

这是因为一旦安装了组件，就会触发span生命周期事件，而您正在寻找的是document.addEventListener("DOMContentLoaded", function() { document.getElementById("ReportBtn").style.border = "solid #FF0000"; });方法。

componentDidMount

因此，在这种情况下，您将选择器存储在名为render的类属性中，稍后在渲染时，您可以将其称为var DatePicker = React.createClass({ picker: null, changeDuration: function (date) { this.props.onChange(this.props.name, date); }, componentDidMount: function () { var _self = this; var picker = new Pikaday({ field: document.getElementById(this.props.name), format: 'D MMM YYYY', onSelect: function () { _self.changeDuration(this.getMoment().toDate()) }, minDate: this.props.minDate }); this.picker = picker; }, render: function () { if(this.picker){ this.picker.setMinDate(this.props.minDate); } return ( <input type="text" id={this.props.name} defaultValue={this.props.value}/> ) } });方法。

添加jquery以响应组件并更新状态

1 个答案: