AtTextarea，AtInputNumber 我只要输入单个字符他就会触发滚动条 #1837
Description
问题描述
这是一个受控input，我只要触发了useState，整个组件就会重新刷新，滚动条就会重置到页面顶端，导致页面闪动
复现步骤
直接修改input控件就会触发
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 (
<>
<AtMessage />
<AtFloatLayout
isOpened={open}
title="编辑项目信息"
onClose={onClose}
className={styles.floatInvestorCreate}
>
<AtForm>
<View style={{ marginBottom: 50 }}>
<AtList>
<AtInput
name="name"
title="项目"
type="text"
value={name}
disabled
/>
<MyPicker
mode="selector"
range={projectState}
onChange={(e) => setStage(projectState[e.detail.value])}
title="项目阶段"
value={stage}
placeholder="请选择"
/>
<MyPicker
mode="selector"
range={["未知", "独家", "leading", "co sale"]}
onChange={(e) =>
setProjectServiceModel(
numberToServiceModelMapping[e.detail.value]
)
}
title="服务模式"
value={serviceModelMapping[projectServiceModel]}
placeholder="请选择"
/>
<AtSwitch
title="co-selling"
checked={isRequire === "yes"}
onChange={(e) => setIsRequire(e ? "yes" : "no")}
/>
<MyCurrencySelect
name="融资交易币种"
value={expectTransactionCurrencyType}
placeholder="请选择"
mode="update"
onChange={setExpectTransactionCurrencyType}
/>
<MyInputNumber
title="融资期望上限"
width={200}
step={10000}
value={expectFinancingAmountMax}
onChange={setExpectFinancingAmountMax}
/>
<MyInputNumber
title="融资期望下限"
width={200}
step={10000}
value={expectFinancingAmountMin}
onChange={setExpectFinancingAmountMin}
/>
<AtListItem
title="投资人需求"
note={
<AtTextarea
// value={investorNeed}
onChange={(e, event) => {
event?.preventDefault()
event?.stopPropagation()
setInvestorNeed(e)
}}
maxLength={200}
placeholder="请输入"
/>
}
/>
</AtList>
</View>
<SubmitBtn
onClick={onSubmit}
loading={loading}
style={{ bottom: 8 }}
/>
</AtForm>
</AtFloatLayout>
</>
)
}期望行为
滚动条位置不变，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它也没有受控