Связь между вложенными дочерними компонентами в React.js

Question

Вам не понадобится много времени, чтобы понять, что я, вероятно, не в своей глубине. Я не только новичок в React.js, но и в ES6, поэтому, пожалуйста, будьте нежны с вашими ответами ...

Здесь.

Я использую компонент для построения формы ввода:

const Input = (props) => { 
    return(
     <input ... /> 
    ) 
} 

У меня есть компонент, который я использую для построения HTML вокруг любой из основных элементов формы, которые я даю его.

const InputWrap = (props) => { 
    return(
     <div class="input-wrap" ...> 
      {children} 
     </div> 
    ) 
} 

Что позволяет мне сделать что-то вроде этого ...

const Input = (props) => { 
    return(
     <InputWrap> 
      <input ... /> 
     </InputWrap> 
    ) 
} 

То, что я хотел бы сделать, это добавить символ подсчета компонент в смеси:

const InputWrap = (props) => { 
    return(
     <div class="input-wrap" ... > 
      {children} // which is the HTML input 
      {props.maxValue && <CharCounter />} 
     </div> 
    ) 
} 

Так вот моя проблема ...

<CharCounter /> необходимо уведомить вас об изменениях до <input /> и обновить его внутреннее состояние.

<input /> и <CharCounter /> являются братьями и детьми <InputWrap /> и так, от того, что я могу собрать, мне нужен метод внутри <InputWrap /> который связывает в onChange в <input /> и какой-то метод, который будет обновлять состояние в <CharCount /> компоненты ,

Я в недоумении относительно того, как я идти о добавлении обратного вызова в качестве <input onChange={doSomething} /> в форме {children} к тому времени он вступает в контакт с <CharCount /> раз внутри <InputWrap /> ...

Где я здесь не так? Я начинаю думать, что это было еще в начале ...

Answer 1

Есть два типичных способа общения между братьями и сестрами:

1. Вы используете InputWrapper как DataContainer
2. Вы используете данные Библиотека потока, такая как поток или редукция (что намного сложнее, особенно для этого случая)

Для 1. вам необходимо, как вы правильно заметили, обработчик onChange для входного компонента, который является функцией, определенной в Компоненте и который передается на вход. Если ваш входной компонент является собственным компонентом, а не родным компонентом, вам необходимо передать поддержку onChange на собственный вход.

Функция в компоненте принимает вход, подсчитывает символы и устанавливает внутреннюю переменную состояния с помощью setState ({charCount: # CountValue #}).И тогда вы можете передать переменную состояния в CharCount компонент с

одна важная вещь, говоря: Вы используете апатридов компоненты и, следовательно, вам нужно будет изменить InputWrap к нормальной реакции компоненту

class InputWrap extends React.Component { 
    ... 
} 

Надежда это даст вам правильное направление.

Answer 2

Другое отличное решение, подобное редуксу, но имеющее другую архитектуру и api: https://github.com/mobxjs/mobx-react.

Вы можете использовать команду HOC для ввода общего состояния для любого реагирующего компонента в вашем приложении.