jd-opensource / jd-opensource/taro-ui

AtTextarea,AtInputNumber 我只要输入单个字符他就会触发滚动条

Open
#1,837 3 comments 0 reactions 0 assignees View on GitHub
iron-tree:adopted stage:verify
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.