React (Gutenberg) DateTimePicker, который не показывает встроенный - PullRequest
Новая
       56

React (Gutenberg) DateTimePicker, который не показывает встроенный

1 голос
/ 24 сентября 2019

Для живого блога я создал блок Гутенберга, в который пользователи могут добавлять элементы живого блога.У каждого элемента есть дата и время, поэтому я решил использовать DateTimePicker : 

<DateTimePicker
  currentDate={liveblog.datetime}
  value={liveblog.datetime}
  onChange={datetime => {
    const newObject = Object.assign({}, liveblog, {
      datetime: datetime
    });
    props.setAttributes({
      items: [
        ...items.filter(
          item => item.index != liveblog.index
        ),
        newObject
      ]
    });
  }}
  is12Hour={false}
/>

Моя проблема заключается в том, что весь элемент оказывается встроенным.Я бы предпочел просто показать дату и время, которые были выбраны, и когда пользователь щелкнет по нему, DateTimePicker будет отображаться.Это все примеры, которые я нашел, это поведение по умолчанию (с отображением поля ввода), но мне кажется, что это не так.Как заставить сборщик «всплыть»?

Я попытался создать кнопку, которая вызывает функцию для возврата элемента следующим образом: 

const toggleDateTimePicker = (liveblog) => {

  return <DateTimePicker
    currentDate={liveblog.datetime}
    value={liveblog.datetime}
    onChange={datetime => {
      const newObject = Object.assign({}, liveblog, {
        datetime: datetime
      });
      props.setAttributes({
        items: [
          ...items.filter(
            item => item.index != liveblog.index
          ),
          newObject
        ]
      });
    }}
    is12Hour={false}
  />
};

и: 

<Button onClick={(liveblog) => toggleDateTimePicker (liveblog)} >test</Button>

Функция вызывается правильно, ноничего не рендерит / не показывает.

...