【React】Ant Design Mobile 使用多选框样式实现单选操作

import React, {
  useCallback, useEffect,
  useMemo,
  useState
} from 'react';
import {
  Card, ImagePicker, InputItem, List, TextareaItem, Checkbox
} from 'antd-mobile';

const RiskReporting = () => {
  const [data, setData] = useState({
    transferRecord: [
      {
        imgs: []
      }
    ],
    photo: [],
  });
  const [fileList, setFiles] = useState([]);
  const [conclusion, setConclusion] = useState([
    { value: 0, label: '开展处置', checked: false },
    { value: 1, label: '掌握关注', checked: false },
    { value: 2, label: '转移处理', checked: false },
  ]);

  const query = useMemo(() => ({
    addressCode: '',
    pageNo: 1,
    size: 10
  }), []);

  const getList = useCallback(() => {
    setData({
      type: '电信诈骗',
      level: '严重',
      position: 'aa',
      supervisor: 'bb',
      executor: 'cc',
      review: 'bb',
      endData: '2021-07-20',
    });
  }, [setData, query]);

  useEffect(() => {
    getList();
  }, [getList]);

  const onChange = (files, type, index) => {
    console.log(files, type, index);
    setFiles(files);
  };

  // 审批
  const chooseConclusion = (value) => {
    const list = [];
    for (let i = 0; i < conclusion.length; i++) {
      if (value === conclusion[i].value) {
        conclusion[i].checked = true;
      } else {
        conclusion[i].checked = false;
      }
      list.push(conclusion[i]);
    }
    setConclusion(list);
  };

  return (
    <>
      <div>
        <Card full>
          <Card.Body>
            <div>我是一个任务标题名称</div>
          </Card.Body>
          <Card.Footer content="发起人：左慧蓉" extra={<div>2021年9月8日 12点00分</div>} />
        </Card>
        <div style={{ height: '10px' }}></div>
        <List>
          <InputItem
            type="text"
            editable={false}
          >
            风险信息
          </InputItem>
          <InputItem
            type="text"
            value={data.type}
            editable={false}
          >
            类型
          </InputItem>
          <InputItem
            value={data.level}
            type="text"
            editable={false}
          >
            等级
          </InputItem>
          <InputItem
            value={data.position}
            type="text"
            placeholder="请描述具体位置"
            editable={false}
          >
            位置
          </InputItem>
        </List>
        <div style={{ height: '10px' }}></div>
        <List>
          <TextareaItem
            title="备注"
          />
          <TextareaItem
            defaultValue="发现电话，网络和短信方式，编造虚假信息，设置骗局。对受害人实施远程，非接触式诈骗，诱惑受害人。"
            rows={3}
            placeholder="请输入备注信息"
          />
          <div style={{ height: '10px' }}></div>
        </List>
        <List>
          <InputItem
            type="text"
            editable={false}
          >
            图片
          </InputItem>
          <ImagePicker
            files={fileList}
            length="3"
            selectable={fileList.length < 3}
            onChange={onChange}
            onImageClick={(index, fs) => console.log(index, fs)}
            accept="image/gif,image/jpeg,image/jpg,image/png"
          />
        </List>
        <List>
          <InputItem
            value={data.supervisor}
            type="text"
            editable={false}
          >
            督办人
          </InputItem>
          <InputItem
            value={data.executor}
            type="text"
            editable={false}
          >
            执行人
          </InputItem>
        </List>
        <div style={{ height: '10px' }}></div>
        <List>
          <InputItem
            value={data.review}
            type="text"
            editable={false}
          >
            审批人
          </InputItem>
          <InputItem
            value={data.endData}
            type="text"
            editable={false}
          >
            截止日期
          </InputItem>
        </List>
        <div style={{ height: '10px' }}></div>
        <List>
          <InputItem
            type="text"
            editable={false}
          >
            审批
          </InputItem>
          {conclusion.map(i => (
            <Checkbox.CheckboxItem key={i.value} checked={i.checked} onChange={() => chooseConclusion(i.value)}>
              {i.label}
            </Checkbox.CheckboxItem>
          ))}
        </List>
      </div>
    </>
  );
};

export default RiskReporting;

.am-input-control input{
  text-align: right !important;
}

图片