javascript - 如何将选择值从日历传递到输入

Question

我正在使用来自 Antd 库的 DatePicker 组件，该组件在后台运行 MomentJS 以实现日期/时间功能，作为更大的调度组件的一部分。

我在组件中创建了第二个输入元素，并将其设置为禁用。这样输入是只读的。我尝试将从日历中选择的任何日期的值传递到以下格式的输入字段:7/09/2019

有没有办法在组件级别做到这一点？

我的组件

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, Row, Col } from "antd";

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}

ReactDOM.render(
  <div>
    <Row>
      <Col span={8}>
        <DatePicker
          open
          className="my-class"
          onChange={onChange}
          onOk={onOk}
          format="MMMM"
        />
      </Col>
      <Col span={2} offset={6}>
        <input value="7/09/2019" disabled />
      </Col>
    </Row>
  </div>,
  document.getElementById("container")
);

Answer 1

为此，您应该使用状态跟踪该值。

您可以使用定义类组件的传统方法并使用setState，也可以使用钩子(Hook)。

对于构造日期字符串，有原生的 JS 方法可以帮助您解决这个问题! Date.toLocaleDateString

我建议查看此处的“日期”文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, Row, Col } from "antd";

const DatePickerExample = () => {
  const [date, setDate] = useState(new Date().toLocaleDateString("en-US"));

  return (
    <div>
      <Row>
        <Col span={8}>
          <DatePicker
            open
            className="my-class"
            onChange={value =>
              setDate(new Date(value).toLocaleDateString("en-US"))
            }
            onOk={value => setDate(new Date(value).toLocaleDateString("en-US"))}
            format="MMMM"
          />
        </Col>
        <Col span={2} offset={6}>
          <input value={date} disabled />
        </Col>
      </Row>
    </div>
  );
};

ReactDOM.render(<DatePickerExample />, document.getElementById("container"));

这是所提供示例的 CodeSandbox 链接! https://codesandbox.io/s/ancient-paper-hswmo