React:将State传递给同级
React:将State传递给同级
提问于 2021-09-27 05:56:57
我已经创建了一个受控组件，它将一个输入字段限制为4个数字。这些数字可以在任何时候更改，任何时候数字是四位数，我希望将结果传递给同级组件以执行操作。
我将值发送到父状态，然后重新呈现，然后同级状态获取该值。但是我的组件也会重新呈现，并且输入字段将丢失该值。
我应该只将值发送给父对象，让父对象在每次输入更改时重新呈现吗？
还是使用上下文？
任何洞察力都将是伟大的，因为我是新的反应。
const NumberComp = ({setPostcode})=>{
const [ fieldValue, setFieldValue ] = useState('')
useEffect(()=>{
if(fieldValue.length == 4){
setPostcode(fieldValue)
}
}, [fieldValue])
const updateNumber = (e)=>{
const value = e.target.value
if(value.length > 4 || isNaN(value)) return
setFieldValue(value)
}
return <input onChange={updateNumber} value={fieldValue} type="text" />
}回答 2
Stack Overflow用户
发布于 2021-09-27 06:03:14
如果你的项目很小，那么提升状态并将其传递给兄弟组件和组件memoize，否则，如果你想避免属性钻探，就使用上下文API。
Stack Overflow用户
发布于 2021-09-27 06:05:14
您还需要让重新渲染发生在父对象上。仅当重新渲染父对象时，才能使用子对象渲染。但是，这不会将未更改的部分重新渲染为React updates only what is necessary。
您也可以查看this question来帮助您消除疑虑。
您也可以尝试使用react memos，但它需要一些精细的控制，以确保您的组件在应该更新时进行更新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69341820
复制相关文章
相似问题
腾讯云开发者
