jd-opensource / jd-opensource/taro-ui
AtTextarea,AtInputNumber 我只要输入单个字符他就会触发滚动条
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
**问题描述**
这是一个受控input,我只要触发了useState,整个组件就会重新刷新,滚动条就会重置到页面顶端,导致页面闪动
**复现步骤**
直接修改input控件就会触发
```tsx
import { useState, useEffect, useMemo } from "react"
import { useSetState } from "ahooks"
import {
AtFloatLayout,
AtForm,
AtInput,
AtList,
AtListItem,
AtMessage,
AtSwitch,
AtTextarea,
} from "taro-ui"
import MyPicker from "@/components/MyPicker"
import { updateInfo } from "@/services/project.ts"
import { handleUpdate } from "@/utils/handle"
import { projectState } from "@/configs/global"
import MyInputNumber from "@/components/MyInputNumber"
import MyCurrencySelect from "@/components/MyCurrencySelect"
import styles from "../index.module.scss"
import SubmitBtn from "@/components/SubmitBtn"
import { View } from "@tarojs/components"
const serviceModelMapping = {
unknown: "未知",
exclusive: "独家",
leading: "leading",
co_sale: "co sale",
}
const numberToServiceModelMapping = [
"unknown",
"exclusive",
"leading",
"co_sale",
]
export default function ProjectUpdate({
onClose,
open,
projectInfo,
handleRefresh,
}) {
const [loading, setLoading] = useState(false)
// 将表单状态拆分
const [name, setName] = useState("")
const [stage, setStage] = useState("")
const [projectServiceModel, setProjectServiceModel] = useState("")
const [isRequire, setIsRequire] = useState("no")
const [investorNeed, setInvestorNeed] = useState("")
const [expectTransactionCurrencyType, setExpectTransactionCurrencyType] =
useState("")
const [expectFinancingAmountMin, setExpectFinancingAmountMin] = useState("")
const [expectFinancingAmountMax, setExpectFinancingAmountMax] = useState("")
useEffect(() => {
if (projectInfo) {
setName(`${projectInfo.name}-${projectInfo.project_state}`)
setStage(projectInfo.stage || "")
setProjectServiceModel(projectInfo.project_service_model || "")
setIsRequire(projectInfo.project_investor_dock_require ? "yes" : "no")
setInvestorNeed(projectInfo.investor_need || "")
setExpectTransactionCurrencyType(
projectInfo.expect_transaction_currency_type || ""
)
setExpectFinancingAmountMin(projectInfo.expect_financing_amount_min || "")
setExpectFinancingAmountMax(projectInfo.expect_financing_amount_max || "")
}
}, [projectInfo])
const onSubmit = () => {
setLoading(true)
const updatedData = {
uuid: projectInfo?.uuid,
project_uuid: projectInfo?.uuid,
name,
stage,
project_service_model: projectServiceModel,
is_require: isRequire,
investor_need: investorNeed,
expect_transaction_currency_type: expectTransactionCurrencyType,
expect_financing_amount_min: expectFinancingAmountMin,
expect_financing_amount_max: expectFinancingAmountMax,
}
handleUpdate(updateInfo(updatedData), () => {
setLoading(false)
onClose()
handleRefresh()
})
}
return (
<>
setStage(projectState[e.detail.value])}
title="项目阶段"
value={stage}
placeholder="请选择"
/>
setProjectServiceModel(
numberToServiceModelMapping[e.detail.value]
)
}
title="服务模式"
value={serviceModelMapping[projectServiceModel]}
placeholder="请选择"
/>
setIsRequire(e ? "yes" : "no")}
/>
{
event?.preventDefault()
event?.stopPropagation()
setInvestorNeed(e)
}}
maxLength={200}
placeholder="请输入"
/>
}
/>
)
}
```
**期望行为**
滚动条位置不变,useState正常修改
**报错信息**
无
**系统信息**
"@antv/f2": "^5.0.37",
"@babel/runtime": "^7.21.5",
"@nutui/nutui-react-taro": "^2.6.7",
"@tarojs/components": "3.6.19",
"@tarojs/helper": "3.6.19",
"@tarojs/plugin-framework-react": "3.6.19",
"@tarojs/plugin-html": "^3.6.26",
"@tarojs/plugin-platform-alipay": "3.6.19",
"@tarojs/plugin-platform-h5": "3.6.19",
"@tarojs/plugin-platform-jd": "3.6.19",
"@tarojs/plugin-platform-qq": "3.6.19",
"@tarojs/plugin-platform-swan": "3.6.19",
"@tarojs/plugin-platform-tt": "3.6.19",
"@tarojs/plugin-platform-weapp": "3.6.19",
"@tarojs/react": "3.6.19",
"@tarojs/runtime": "3.6.19",
"@tarojs/shared": "3.6.19",
"@tarojs/taro": "3.6.19",
"taro-f2-react": "^1.1.2",
"taro-ui": "^3.2.0",
出现错误平台 [h5]
**补充信息**
估计就是useState变化导致了整个页面重新渲染,如果不修改useState,就不会触发重新渲染,但是你会发现input它也没有受控
Contributor guide
Assessment
This issue has not been assessed yet.