NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.53k stars 758 forks source link

AtCheckbox 无法勾选. 无法多选 #1783

Closed Ccc437647 closed 5 months ago

Ccc437647 commented 5 months ago
import { useEffect, useMemo, useRef, useState } from 'react';
import { AtCheckbox, AtForm } from 'taro-ui';
import { Checkbox } from '@tarojs/components';
interface CheckboxOption {
  value: string
  label: string
  desc?: string
}

export default function Balance() {
  const [checkedList, setCheckedList] = useState([])
  const [checkboxOption, setCheckboxOption] = useState<CheckboxOption[]>([
    {
      value: 'iPhone X',
      label: 'iPhone X',
      desc: '部分地区提供电子普通发票,用户可自行打印,效力等同纸质普通发票,具体以实际出具的发票类型为准。'
    },
    {
      value: 'HUAWEI P20',
      label: 'HUAWEI P20'
    },
    {
      value: 'OPPO Find X',
      label: 'OPPO Find X',
      desc: '部分地区提供电子普通发票,用户可自行打印,效力等同纸质普通发票,具体以实际出具的发票类型为准。',
    },
    {
      value: 'vivo NEX',
      label: 'vivo NEX',
      desc: '部分地区提供电子普通发票,用户可自行打印,效力等同纸质普通发票,具体以实际出具的发票类型为准。',
    }])

  const handleChange = (e) => {
    console.log('====================================');
    console.log('e', e);
    console.log('====================================');
  }
  return (
    <view>
      <AtForm >
        <AtCheckbox
          options={checkboxOption}
          selectedList={checkedList}
          onChange={handleChange}![Snipaste_2024-04-22_17-30-10](https://github.com/NervJS/taro-ui/assets/74176833/6c3760e9-47aa-44fa-8378-b20b313026a2)
      </AtForm>
    </view>
  );
}
taro-ui-bot[bot] commented 5 months ago

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

Ccc437647 commented 5 months ago

{ "name": "taro-demo", "version": "1.0.0", "private": true, "description": "", "templateInfo": { "name": "default", "typescript": true, "css": "none" }, "scripts": { "build:weapp": "taro build --type weapp", "build:swan": "taro build --type swan", "build:alipay": "taro build --type alipay", "build:tt": "taro build --type tt", "build:h5": "taro build --type h5", "build:rn": "taro build --type rn", "build:qq": "taro build --type qq", "build:jd": "taro build --type jd", "build:quickapp": "taro build --type quickapp", "dev:weapp": "npm run build:weapp -- --watch", "dev:swan": "npm run build:swan -- --watch", "dev:alipay": "npm run build:alipay -- --watch", "dev:tt": "npm run build:tt -- --watch", "dev:h5": "npm run build:h5 -- --watch", "dev:rn": "npm run build:rn -- --watch", "dev:qq": "npm run build:qq -- --watch", "dev:jd": "npm run build:jd -- --watch", "dev:quickapp": "npm run build:quickapp -- --watch", "test": "jest" }, "browserslist": [ "last 3 versions", "Android >= 4.1", "ios >= 8" ], "author": "", "dependencies": { "@ant-design/icons": "^5.2.6", "@babel/runtime": "^7.21.5", "@tarojs/components": "3.6.20", "@tarojs/helper": "3.6.20", "@tarojs/plugin-framework-react": "3.6.20", "@tarojs/plugin-platform-alipay": "3.6.20", "@tarojs/plugin-platform-h5": "3.6.20", "@tarojs/plugin-platform-jd": "3.6.20", "@tarojs/plugin-platform-qq": "3.6.20", "@tarojs/plugin-platform-swan": "3.6.20", "@tarojs/plugin-platform-tt": "3.6.20", "@tarojs/plugin-platform-weapp": "3.6.20", "@tarojs/react": "3.6.20", "@tarojs/runtime": "3.6.20", "@tarojs/shared": "3.6.20", "@tarojs/taro": "3.6.20", "crypto-js": "^4.2.0", "dayjs": "^1.11.10", "lodash-es": "^4.17.21", "mime": "^4.0.1", "mime-types": "^2.1.35", "nanoid": "^5.0.4", "react": "^18.0.0", "react-dom": "^18.0.0", "taro-ui": "^3.2.0", "uuid": "^9.0.1" }, "devDependencies": { "@babel/core": "^7.8.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@tarojs/cli": "3.6.20", "@tarojs/taro-loader": "3.6.20", "@tarojs/test-utils-react": "^0.1.1", "@tarojs/webpack5-runner": "3.6.20", "@types/jest": "^29.3.1", "@types/node": "^18.15.11", "@types/react": "^18.0.0", "@types/webpack-env": "^1.13.6", "@typescript-eslint/eslint-plugin": "^6.2.0", "@typescript-eslint/parser": "^6.2.0", "autoprefixer": "^10.4.16", "babel-preset-taro": "3.6.20", "eslint": "^8.12.0", "eslint-config-taro": "3.6.20", "eslint-plugin-import": "^2.12.0", "eslint-plugin-react": "^7.8.2", "eslint-plugin-react-hooks": "^4.2.0", "jest": "^29.3.1", "jest-environment-jsdom": "^29.5.0", "postcss": "^8.4.31", "react-refresh": "^0.11.0", "stylelint": "^14.4.0", "tailwindcss": "^3.3.5", "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "^4.0.1", "typescript": "^5.1.0", "weapp-tailwindcss": "^3.0.3", "webpack": "5.78.0" } } nodejs 版本: 20.10.0

robinv8 commented 5 months ago

需要修改 handleChange 方法

  const handleChange = e => {
    setCheckedList(e)
  }
Ccc437647 commented 5 months ago

需要修改handleChange方法

  const handleChange = e => {
    setCheckedList(e)
  }

不行呢 现在是 页面的AtCheckbox组件显示都不正常

Ccc437647 commented 5 months ago

Snipaste_2024-04-23_09-08-22