react custom components

Foreword:

In development, it is inevitable to encounter components that do not exist in antdesign, so we need to customize them ourselves.

method:

In the documentation, there are 2 types of custom components described:

method one:

Method 2:

Do it yourself

Here I have customized a component that combines a drop-down box with a time range.

According to the second method, we need to set the value and the onchange event with the same name. This can be used with the form component!

import { Button, Form, Input, Select, TimePicker } from 'antd';
import moment from 'moment';
import React, { useEffect, useState } from 'react';
const { Option } = Select;

const SelectTime = ({ value = {}, onChange, }) => {
  const options = [{ value: 1, label: "每周一" }, { value: 2, label: "每周二" }, { value: 3, label: "每周三" }, { value: 4, label: "每周四" }, { value: 5, label: "每周五" }, { value: 6, label: "每周六" }, { value: 7, label: "每周日" }]
  const [week, setWeek] = useState();
  const [timeRange, setTimeRange] = useState([]);

  const triggerChange = (changedValue) => {
    onChange?.({
      week,
      timeRange,
      ...value,
      ...changedValue,
    });
  };
  const onNumberChange = (value) => {
    setWeek(value);
    triggerChange({
      week: value,
    });
  };
  const onCurrencyChange = (newTimeRange) => {
    setTimeRange(newTimeRange);
    triggerChange({
      timeRange: newTimeRange,
    });
  };
  return (
    <>
      <Select
        style={
   
   {
          width: 100,
          margin: '0 8px',
        }}
        options={options}
        allowClear={true}
        placeholder={"每周几"}
        onChange={onNumberChange}
        value={value.week || week}
      >

      </Select>
      <TimePicker.RangePicker format={"HH:mm"} onChange={onCurrencyChange} value={value.timeRange || timeRange} />
    </>
  )
}
export default SelectTime;

(Note: Be sure to add the value attribute to the component, otherwise it will cause data echo failure!)

 

(Note: When accepting parameters from the parent component, the name must be value, otherwise data rendering will fail!)

 

 

How to cite:

import corresponding components

import SelectTime from '../../Components/SelectTime';

Use directly where needed