Question

我在以下场景中使用DatePicker：

呈现使用DatePicker
在componentDidMount上，获取表单的已保存信息（如果之前已保存）
将DatePicker的道具defaultValue从undefined设置为提取的值

看起来很简单。但是，由于DatePicker的行为仅在第一次渲染时呈现defaultValue，因此在获取值时显然为空（第二次渲染）。

我看到的其他两个选项：

有一个受控制的组件 - 手动操作值（在获取时提供它，然后在onChange触发时更改它）
只有在无法获取（新表单）或获取数据并准备填充数据时，才会呈现DatePicker。

对于实现这一目标的最佳方法有什么想法？

Answer 1

不是填充defaultDate道具，而是将value道具挂钩到您想要设置的任何道具。使用这种方法，您还需要连接onChange处理程序。它看起来像这样：

onChange(event, newValue) {
  this.setState({myDate: newValue})
},
render() {
  return (
    ...
    <DatePicker value={this.state.myDate} onChange={this.onChangeHandler}>
    ...
  )
},

或者，您可以使用React的LinkedStateMixin和DatePicker的{{1}}道具来使用双向绑定功能。

如何使用更新的defaultValue重新渲染DatePicker？

1 个答案: