如何在父组件中获取React子组件的属性/object

Question

我创建了包含地址字段 [几个输入框和 SelectItems] 的 FC [比如我的示例的子组件]，当从另一个组件 [父] 调用此 FC 时，我需要访问输入框的值和 select 添加的项目用户。

当父通过功能组件样式 [TypeScript] 调用时，您能否通过给出子组件中说 1 文本框的简单示例来帮助我

这是我的具有两个 Inputs 和一个 SelectItem 的子组件的示例代码

return (
    <>
          <Accordion varient={'grouped'} expanded theme={theme}
          items={[
            {
              content: 
              <>

              <Input label='Address Line 1' fullWidth={true} type={''} startAdornment={""} endAdornment={""}  
                  onChange={(e) => setAddressL1(e)} onBlur={handleChangeAddrL1} id={''} theme={theme} dynamic={false} />
             
                <Input label='City' fullWidth={false} type={''} startAdornment={""} endAdornment={""}                onChange={(e) => setCity(e)} onBlur={handleChangeCity} id={''} theme={theme} dynamic={false} /> 
             
            
              <Select label='State' theme={theme} items={states} value = {stateCode} sxProps={{ m: 2, width: 100 }} ref={inputRef}
                    onChange={handleChange1} ></Select> 
                
             
              <Button text= 'Verify Address' ></Button>

              </>,
              isExpanded: true,
              key: "string",
              subtitle: `${addressL1} ${addressL2} ${city} ${stateCode} ${county} ${zipCode}`, 
              title: AccordionTitle,
              actionBtn: <></>
            }
           ]}
          /> 

    </>  
   )
}

Answer 1

根据您想要实现的目标，有两种情况可以处理您的请求。 首先，您可以使用由 onClick 或 onPress 事件触发的子组件中navigation.navigate('RouterName', {/* your params here */})将数据从子组件传递到父组件。 假设 function 是 moveTo，那么您将在子组件中拥有这个：

const moveTo = () => {
//Logics here
...
navigate('/yourUrl/', { state: { id: 7, color: 'green' } });
}

然后在父组件中，像这样抓取颜色的数据：

import { useParams } from 'react-router-dom'

const getdataFromChild = ({route,navigate}) => {
  return (
    <div>
        {route.params.state}
    </div>
  )
}

export default getDataFromChild

仅当您触发从子级到父级的导航时才有可能，否则请移至选项 Second。

选项二：如果没有点击事件触发从子到父或父到子的导航，则需要使用 React redux。 因此，您必须创建该数据的存储并在整个应用程序中共享它，以便可以在需要它的每个组件中访问它。 redux 的文档也在medium上或 go 直接到react redux 的官方文档以从源代码获取信息