React类组件如何获取函数式组件封装的react-semantic-ui-datepickers选中值

这个问题的核心是日期选中值目前只存储在DatePicker函数组件的内部状态中，父组件MyForm没有访问权限，将日期状态的维护权提升到父组件即可解决：

• 步骤1：在父组件的state中新增日期存储字段

state = {
  colour: 'Black',
  description: '',
  endDate: null // 新增字段存储日期选中值
};

• 步骤2：改造DatePicker子组件，移除内部状态，改用父组件传入的属性

const DatePicker = ({ value, onChange }) => {
  return <SemanticDatepicker value={value} onChange={onChange} />;
};

• 步骤3：父组件调用子组件时传入对应属性
  将render方法中的<DatePicker />替换为以下代码：

<DatePicker 
  value={this.state.endDate}
  onChange={(event, data) => this.setState({ endDate: data.value })}
/>

• 步骤4：提交方法中直接读取state里的日期值即可

onSubmit = async (event) => {
  event.preventDefault();
  console.log(this.state.colour);
  console.log(this.state.description);
  console.log(this.state.endDate); // 此处即可获取日期选择器的选中值
};

该方案符合React单向数据流的设计规范，所有表单状态统一在父组件维护，后续表单校验、重置、初始值回显等逻辑都可以集中处理，代码改动量最小，可维护性最高。

内容的提问来源于stack exchange，提问作者Jim Parsnip