Как создать контейнерный компонент с доступом к некоторым дочерним ценностям?

Question

У меня есть компонентная оболочка, подобная этой:

 <SpecialWrapper config={}>
    {this.props.children}
 </SpecialWrapper>

Идея состоит в том, чтобы использовать ее так:

 <SpecialWrapper>

       // whatever other components you have

       <SpecialInput1/>
       <SpecialInput1/>

       <Button onClick={()=> SpecialWrapper.methodWhereValuesNeeded()}

 </SpecialWrapper>

Возможно ли как-то получить доступ к значениям моего специальные входные данные в моем методе "methodWhereValuesNeeded"?

Answer 1

Вы можете управлять состоянием для specialInput в компоненте-обертке и передавать функцию обновления состояния в качестве реквизита для специального Input

functionForUpdatingWrapperState = (newValue) => {
    this.state.SpecialInput1Value = newValue;
}

<SpecialWrapper>

   // whatever other components you have

   <SpecialInput1/>
   <SpecialInput1 updateValueFunction={functionForUpdatingWrapperState}/>

   <Button onClick={()=> SpecialWrapper.methodWhereValuesNeeded()}

 </SpecialWrapper>