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

Question

我正在使用一个名为React语义ui日期选择器的React模块，我相信它是基于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的空包装器。无论如何，当onChange处理程序被SemanticDatePicker调用时，它实际上会写入在MyForm级别声明的状态，然后您可以在MyForm的方法中安全地读取它。

从官方React文档中提升状态的部分是针对这个特定用例的。