Question

我正在使用Datedicker组件，它是Antd库的一部分，该组件在内部运行MomentJS以实现日期/时间功能，是较大的计划组件的一部分。

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

有没有办法在组件级别执行此操作？

My Component

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，也可以使用钩子。

关于构造日期字符串，有本机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

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

1 个答案: