[移动开发]关于React 输入框、图片、选择器、日期选择器的代码操作

import React, {
  useCallback,
  useEffect, useMemo, useState
} from 'react';
import {
  Picker, List, InputItem, ImagePicker, DatePicker, TextareaItem, Button, WhiteSpace
} from 'antd-mobile';

const HandlePage = () => {
  const [data, setData] = useState({});
  const [tempType, setTempType] = useState('');
  const [level, setLever] = useState('');
  const [supervisor, setSupervisor] = useState('');
  const [executor, setExecutor] = useState('');
  const [fileList, setFiles] = useState([]);
  const [showTime, setShowTime] = useState('');
  const query = useMemo(() => ({
    addressCode: '',
    pageNo: 1,
    size: 10
  }), []);

  const getList = useCallback(() => {
    setData({
      type: [
        {
          label: '打架斗殴',
          value: '打架斗殴',
        },
        {
          label: '打情骂俏',
          value: '打情骂俏',
        },
      ],
      level: [
        {
          label: '严重',
          value: '严重',
        },
        {
          label: '中度',
          value: '中度',
        },
        {
          label: '轻微',
          value: '轻微',
        }
      ],
      supervisor: [
        {
          label: 'aa',
          value: 'aa',
        },
        {
          label: 'bb',
          value: 'bb',
        },
      ],
      executor: [
        {
          label: 'aa',
          value: 'aa',
        },
        {
          label: 'cc',
          value: 'dd',
        },
      ],
      showTime: '',
    });
  }, [query]);
  useEffect(() => {
    getList();
  }, [getList]);

  const onChange = (files, type, index) => {
    console.log(files, type, index);
    setFiles(files);
  };
  return (
    <div style={{ backgroundColor: 'rgb(239,239,244)' }}>
      <div style={{ height: '10px' }}></div>
      <List>
        <InputItem
          type="text"
          placeholder="请概括问题内容"
          clear
        >
          标题
        </InputItem>
        <Picker
          data={data.type}
          cols={1}
          className="forss"
          onChange={(value) => setTempType(value)}
          value={tempType}
        >
          <List.Item arrow="horizontal">类型</List.Item>
        </Picker>
        <Picker
          data={data.level}
          cols={1}
          className="forss"
          onChange={(value) => setLever(value)}
          value={level}
        >
          <List.Item arrow="horizontal">等级</List.Item>
        </Picker>
        <InputItem
          type="text"
          placeholder="请描述具体位置"
          clear
          arrow="horizontal"
          onClick={() => {}}
        >
          位置
        </InputItem>
        <div style={{ height: '10px' }}></div>
      </List>
      <List renderHeader={
        <>
          图片上传(
          {fileList.length}
          /6)
        </>
      }
      >
        <ImagePicker
          files={fileList}
          length="3"
          selectable={fileList.length < 6}
          onChange={onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          accept="image/gif,image/jpeg,image/jpg,image/png"
        />
        <div style={{ height: '10px' }}></div>
        <Picker
          data={data.supervisor}
          cols={1}
          className="forss"
          onChange={(value) => setSupervisor(value)}
          value={supervisor}
        >
          <List.Item arrow="horizontal">督办人</List.Item>
        </Picker>
        <Picker
          data={data.executor}
          cols={1}
          className="forss"
          onChange={(value) => setExecutor(value)}
          value={executor}
        >
          <List.Item arrow="horizontal">执行人</List.Item>
        </Picker>
        <DatePicker
          mode="date"
          value={showTime}
          onChange={value => setShowTime(value)}
        >
          <List.Item arrow="horizontal">截止日期</List.Item>
        </DatePicker>
      </List>
      <div style={{ height: '10px' }}></div>
      <List>
        <TextareaItem
          title="备注信息"
        />
        <TextareaItem
          rows={3}
          count={100}
          placeholder="请输入备注信息"
        />
      </List>
      <Button type="primary">提交</Button>
      <WhiteSpace />
    </div>
  );
};
export default HandlePage;