ReactJS Ant設計-單擊按鈕打開DatePicker

Question

我正在使用用於ReactJS的螞蟻設計框架，在這里我試圖找到一種在單擊按鈕時打開DatePicker的解決方案，但是對於框架組件來說這似乎是不可能的，我試圖使用第三方DatePicker，但它不能很好地與它。

我的要求是輸入一個簡單的內容，旁邊還有一個按鈕，單擊按鈕DatePicker應該會彈出。

這是我未完成的演示

如果有人致力於此類解決方案，請提供幫助。

謝謝。

Answer 1

DatePicker具有一個open道具，您可以將其設置為boolean值。 將onClick事件添加到您的按鈕，然后您可以切換日期選擇器的狀態。

我不想顯示該DatePicker輸入框，並選擇日期以填充其他Input字段中的值，有解決方案嗎？

在無需我詳細說明此問題的樣式部分的情況下，可以使用onChange事件設置其他input的值。

constructor(props) {
    super(props);
    this.state = {
        pickerOpen: false,
        selectedDate: null
    }
}

togglePicker = () => {
    this.setState({pickerOpen: !this.state.pickerOpen});
}

handleChange = selectedDate => {
    this.setState({selectedDate});
}

const { pickerOpen, selectedDate } = this.state;
<Input value={selectedDate && moment(selectedDate).format('YYYY-MM-DD')}/>
<DatePicker open={pickerOpen} onChange={this.handleChange}/>
<Button onClick={this.togglePicker}>

Answer 2

您可以使用antd Datepicker中的open字段在單擊按鈕時切換datepicker。

<DatePicker
   open={this.state.openDatePicker}
   onOpenChange={this.datePickerStatus}
/>
<Button
   type="primary"
   style={{ marginLeft: "100px" }}
   onClick={this.toggleDatePicker}
>
  <Icon type="calendar" theme="outlined" />
</Button>

您可以使用單擊按鈕時調用的功能toggleDatePicker來切換open字段：

toggleDatePicker = () => {
  this.setState(prevState => ({
    openDatePicker: !prevState.openDatePicker
  }));
};

您可能還想在單擊外部時關閉日期選擇器，這可以通過以下方法實現：

hideDatePicker = () => {
  this.setState({
    openDatePicker: false
  });
};

datePickerStatus = status => {
  if (!status) {
    this.hideDatePicker();
  }
};

您可以在此處找到鏈接的實時示例