Question

我尝试在组件中使用react-dates。它仅适用于单个实例，但不适用于多个实例。如下图所示：

WORKS（显示单个日期范围输入，并在单击时显示日历）：

<DateRangePicker
    focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
    onFocusChange={focusedInput => this.setState({ focusedInput })}
    />

不起作用（显示两个日期范围输入，但单击时不显示日历）：

<DateRangePicker
    focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
    onFocusChange={focusedInput => this.setState({ focusedInput })}
    />

<DateRangePicker
    focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
    onFocusChange={focusedInput => this.setState({ focusedInput })}
    />

我在做什么错了？

Answer 1

DateRangePicker组件都在状态中侦听相同的focusInput。 Date DateRangePicker必须在this.state中具有自己的focusInput。 focusedInput2和{ extend: 'collection', autoClose: true, className: 'btn-default', text: '<div class="tips" title="Filtrar por Estado">Estado</div>', buttons: [ { text: 'Abastecer', action: function (e, dt, node, config) { table.column(13) .search('Abastecer') .draw(); } }, { text: 'Excesso', action: function (e, dt, node, config) { table.column(13) .search('Excesso') .draw(); } }, { text: 'OK', action: function (e, dt, node, config) { table.column(13) .search('OK') .draw(); } } ] }，然后DateRangePicker可以打开右日历。

在组件中两次使用相同的组件不起作用

1 个答案: