javascript - react : Pass State To Siblings

Question

我创建了一个受控组件，它将输入字段限制为仅 4 个数字。这些数字可以随时更改，只要数字是四位数字，我希望将结果传递给同级组件以进行操作。

我正在将值发送到父状态，这会重新呈现并且 sibling 获取该值。但是我的组件也重新呈现并且输入字段丢失了值。

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

还是使用上下文？

任何见解都会很棒，因为我是 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" />

}

Answer 1

如果您的项目很小，那么提升状态并将其传递给同级组件和组件内存，如果您想避免 prop drilling，则使用上下文 API。