从类组件中反应功能组件中的访问值

Question

我正在使用一个名为React semantic ui datepickers的React模块，我相信它是基于React datepicker的。不管怎样，这更像是一个通用的React问题。我的主类组件和日期选择器功能组件在同一个文件中。日期选择器呈现并工作良好，但我不知道如何访问主类组件中日期选择器的实际值。

下面可以看到代码的简化版本，我只是在控制台中注销一些变量的值。有人能给我一个建议，告诉我从类组件访问所选日期选择器值的最佳方式吗？

import Layout from '../../components/Layout';
import React, { Component, useState } from 'react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
import { Message, Form, Icon, Button, Input } from 'semantic-ui-react';
import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
class MyForm extends Component {
state = {
colour: 'Black',
description: ''
};
onSubmit = async (event) => {
event.preventDefault();
console.log(this.state.colour); // Shows current colour field value.
console.log(this.state.description); // Shows current description field value.
console.log(); // How do I access the selected value of the date picker field??
};
render()  {
return (
<Layout>
<Form onSubmit={this.onSubmit}>
<Form.Field>
<Form.Group>
<Form.Field control='select' value={this.state.colour} onChange={event => this.setState({ colour: event.target.value })}>
<option value='Black'>Black</option>
<option value='Blue'>Blue</option>
<option value='Green'>Green</option>
<option value='Orange'>Orange</option>
</Form.Field>
<DatePicker />
</Form.Group>
<label>Description</label>
<Form.TextArea value={this.state.description} onChange={event => this.setState({ description: event.target.value })} />
</Form.Field>
<Button icon='add' labelPosition='left' content='Add' primary />
</Form>
</Layout>
);
}
}
const DatePicker = () => {
const [endDate, setNewDate] = useState(null);
const onChange = (event, data) => setNewDate(data.value);
return <SemanticDatepicker onChange={onChange} />;
};
export default MyForm;

Answer 1

您需要"提升状态"；在MyForm组件中。

然后，MyForm组件应该将一个onChange处理程序作为道具向下传递给DatePicker组件，后者又将其传递给SemanticDatePicker——顺便说一句，您可能不再需要DatePicker组件了，因为它变成了SemanticDatePicker的空包装器。无论如何，当SemanticDatePicker调用onChange处理程序时，它实际上会写入在MyForm级别声明的状态，然后您可以在MyForm的方法中安全地读取它。

React官方文档中的"提升状态"一节是针对这个特定用例的。