Javascript React（Gutenberg）不显示内联的日期时间选择器

对于liveblog，我创建了一个Gutenberg块，用户可以在其中添加liveblog项目。每个项目都有日期和时间，因此我决定使用：

{
const newObject=Object.assign（{}，liveblog{
日期时间：日期时间
});
道具属性({
项目：[
…items.filter(
item=>item.index！=liveblog.index
),
新对象
]
});
}}
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}
  />
};

consttoggledatetimepicker=（liveblog）=>{
返回{
const newObject=Object.assign（{}，liveblog{
日期时间：日期时间
});
道具属性({
项目：[
…items.filter(
item=>item.index！=liveblog.index
),
新对象
]
});
}}
is12Hour={false}
/>
};

以及：

toggleDateTimePicker（liveblog）}>test

该函数调用正确，但不呈现/显示任何内容

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>