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

Question

我有 checkin 和 checkout 字段，我正在尝试将 pickaday jquery datepicker 集成到我的反应组件 pickaday。我将签入和签出字段都作为父组件中的状态，并将它们作为道具传递给我创建的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 在datepicker 上选择date 时更新状态的位置错误。有人可以告诉我这里做错了什么吗？

Answer 1

这是因为一旦组件被挂载，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}/>
        )
    }
});

因此，在这种情况下，您将选取器存储在名为 picker 的类属性中，稍后在渲染时您可以调用它的 gotoDate 方法。