3

我创建了一个受控组件，将输入字段限制为仅 4 个数字。这些数字可以随时更改，任何时候数字是四位数我希望将结果传递给兄弟组件以执行操作。

我将值发送到父状态，然后重新渲染，兄弟姐妹获取值。但是我的组件也会重新渲染，并且输入字段会丢失值。

我是否应该将值发送给父级，让父级在每次输入更改时重新渲染？

还是使用上下文？

任何见解都会很棒，因为我是 React 新手。

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" />

}
4

2 回答 2

1

如果您的项目很小，则提升状态并将其传递给兄弟组件和组件记忆，否则如果您想避免道具钻探，请使用上下文 API。

于 2021-09-27T06:03:13.820 回答
1

您还需要让重新渲染发生在父级上。只有在重新渲染父级时，才能进行子级渲染。但是，这不会重新渲染未更改的部分，因为React 只会更新必要的部分。

您也可以查看此问题以帮助消除您的疑虑。

你也可以尝试使用 react memos，但它需要一些精细的控制来确保你的组件在它应该更新的时候更新。

于 2021-09-27T06:05:14.100 回答