search

NervJS / taro-ui

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

3.1.1版本AtSearchBar点击无效，无法输入 #1664

Closed LyndonXiao closed 1 year ago

LyndonXiao commented 1 year ago

问题描述 微信小程序端AtSearchBar 展示正常，点击无效，无法出现输入框和搜索按钮，无任何报错信息

复现步骤

import { View } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { useMemo, useState } from "react";
import "./index.scss";
import { AtSearchBar } from "taro-ui";

export default function () {
  const [category, setCategory] = useState("hot");
  const [search, setSearch] = useState("");
  const [categories, setCategories] = useState([
    { id: "a", name: "aaa" },
    { id: "b", name: "bbbb" },
    { id: "c", name: "cccc" },
  ]);
  const page = useMemo(() => Taro.getCurrentInstance().page, []);

  useDidShow(() => {
    const tabbar = Taro.getTabBar(page);
    tabbar?.setSelected(1);
  });

  const handleSearch = () => {
    console.log("search", search);
  };

  return (
    <View>
      <AtSearchBar
        value={search}
        onChange={(v) => setSearch(v)}
      />
      aa
    </View>
  );
}

期望行为 点击后出现输入库和按钮

报错信息

系统信息

补充信息

image
taro-ui-bot[bot] commented 1 year ago

欢迎提交 Issue~

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

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

Good luck and happy coding~

LyndonXiao commented 1 year ago

经测试h5版本表现正常，小程序开发工具中无效，手机预览也无效

robinv8 commented 1 year ago

用了你提供的代码，未发现问题。麻烦提供个完整的 demo，方便复现问题 image

{
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "@tarojs/components": "3.6.15",
    "@tarojs/helper": "3.6.15",
    "@tarojs/plugin-framework-react": "3.6.15",
    "@tarojs/plugin-platform-alipay": "3.6.15",
    "@tarojs/plugin-platform-h5": "3.6.15",
    "@tarojs/plugin-platform-jd": "3.6.15",
    "@tarojs/plugin-platform-qq": "3.6.15",
    "@tarojs/plugin-platform-swan": "3.6.15",
    "@tarojs/plugin-platform-tt": "3.6.15",
    "@tarojs/plugin-platform-weapp": "3.6.15",
    "@tarojs/react": "3.6.15",
    "@tarojs/runtime": "3.6.15",
    "@tarojs/shared": "3.6.15",
    "@tarojs/taro": "3.6.15",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "taro-ui": "file:../taro-ui"
  },
}
LyndonXiao commented 1 year ago

我是先taro ini 一个默认模板的项目，再单独引入npm i taro-ui --save的

{
    "dependencies": {
        "@babel/runtime": "^7.21.5",
        "@tarojs/components": "3.6.15",
        "@tarojs/helper": "3.6.15",
        "@tarojs/plugin-framework-react": "3.6.15",
        "@tarojs/plugin-platform-alipay": "3.6.15",
        "@tarojs/plugin-platform-h5": "3.6.15",
        "@tarojs/plugin-platform-jd": "3.6.15",
        "@tarojs/plugin-platform-qq": "3.6.15",
        "@tarojs/plugin-platform-swan": "3.6.15",
        "@tarojs/plugin-platform-tt": "3.6.15",
        "@tarojs/plugin-platform-weapp": "3.6.15",
        "@tarojs/react": "3.6.15",
        "@tarojs/runtime": "3.6.15",
        "@tarojs/shared": "3.6.15",
        "@tarojs/taro": "3.6.15",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "taro-ui": "^3.1.1"
     },
    "devDependencies": {
        "@babel/core": "^7.8.0",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
        "@tarojs/cli": "3.6.15",
        "@tarojs/taro-loader": "3.6.15",
        "@tarojs/test-utils-react": "^0.1.1",
        "@tarojs/webpack5-runner": "3.6.15",
        "@types/jest": "^29.3.1",
        "@types/node": "^18.15.11",
        "@types/react": "^18.0.0",
        "@types/webpack-env": "^1.13.6",
        "babel-preset-taro": "3.6.15",
        "eslint": "^8.12.0",
        "eslint-config-taro": "3.6.15",
        "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.18",
        "react-refresh": "^0.11.0",
        "stylelint": "^14.4.0",
        "ts-node": "^10.9.1",
        "webpack": "5.78.0"
        }
}
LyndonXiao commented 1 year ago

taroui的源码拿过来一模一样自建组件就能用，神奇

robinv8 commented 1 year ago

你之前直接安装了带 taro-ui 的模板？

LyndonXiao commented 1 year ago

不是，我是先taro ini 一个默认模板的项目，再单独引入npm i taro-ui --save的

bianxuerui commented 1 year ago

请问这个问题解决了吗？我现在遇到了这个问题

LyndonXiao commented 1 year ago

用taroui源码中的searchBar组件代码拿出来，写到自己的自定义组件中使用，完美解决

tapqr commented 1 year ago

一样的创建方式，一样的问题。

tapqr commented 1 year ago

{ "name": "tools-app", "version": "1.0.0", "private": true, "description": "tools app", "templateInfo": { "name": "default", "typescript": true, "css": "sass" }, "scripts": { "build:weapp": "taro build --type weapp --mode prod", "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": { "@babel/runtime": "^7.21.5", "@tarojs/components": "3.6.18", "@tarojs/helper": "3.6.18", "@tarojs/plugin-framework-react": "3.6.18", "@tarojs/plugin-platform-alipay": "3.6.18", "@tarojs/plugin-platform-h5": "3.6.18", "@tarojs/plugin-platform-jd": "3.6.18", "@tarojs/plugin-platform-qq": "3.6.18", "@tarojs/plugin-platform-swan": "3.6.18", "@tarojs/plugin-platform-tt": "3.6.18", "@tarojs/plugin-platform-weapp": "3.6.18", "@tarojs/react": "3.6.18", "@tarojs/runtime": "3.6.18", "@tarojs/shared": "3.6.18", "@tarojs/taro": "3.6.18", "react": "^18.0.0", "react-dom": "^18.0.0", "taro-ui": "^3.1.1" }, "devDependencies": { "@babel/core": "^7.8.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@tarojs/cli": "3.6.18", "@tarojs/taro-loader": "3.6.18", "@tarojs/test-utils-react": "^0.1.1", "@tarojs/webpack5-runner": "3.6.18", "@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", "babel-preset-taro": "3.6.18", "eslint": "^8.12.0", "eslint-config-taro": "3.6.18", "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.18", "react-refresh": "^0.11.0", "stylelint": "^14.4.0", "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "^4.0.1", "typescript": "^5.1.0", "webpack": "5.78.0" } }

fancyhejianyang commented 11 months ago

这问题还在 无法解决

robinv8 commented 11 months ago

@fancyhejianyang 提供个可以复现的完整 demo

denghg commented 11 months ago

我也遇到了版本3.2.0，抖音小程序，编译后发现缺少Input内容，所以无法输入

fancyhejianyang commented 11 months ago

@fancyhejianyang 提供个可以复现的完整 demo

https://github.com/fancyhejianyang/mini-demo

@robinv8

denghg commented 10 months ago

我做过对比，如果成功的话有input控件，如果不成功没有input，如果把控件源码拷贝过了不使用，也不能，如果有一个引用，其他的不修改也能使用，感觉是转换过程中丢失了input

robinv8 commented 10 months ago

在 taro3.5 之后的版本中，在开启 prebundle (默认开启)的情况下，会导致 taro-ui 所引用的 @taro/components 组件没有被打进最终的 bundle 中，导致页面表现异常。

为了解决上述问题，可以手动将 taro-ui 排除在 prebundle 列表之外。在 taro 项目的 config/index.js 中新增如下配置项：

module.exports = {
  // ...
  framework: 'react',
  compiler: {
    type: 'webpack5',
    prebundle: {
      exclude: ['taro-ui']
    }
  },
}
image

摘自：https://taro-ui.taro.zone/#/docs/quickstart

fancyhejianyang commented 10 months ago

这是临时方案吧？期待后续最终解决 多谢

robinv8 commented 10 months ago

没有完美的方案，只有不断更新迭代的方案