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 />内的方法来绑定{ {1}}的{{1}}以及将更新onChange组件中的状态的方法。

我对如何添加回调感到茫然，因为<input />在<CharCount />形式的时候与<input onChange={doSomething} />一起接触{children} <CharCount /> ...

我在哪里错了？我开始认为它回到了开始......

Answer 1

兄弟姐妹之间有两种典型的沟通方式：

您将InputWrapper用作DataContainer
您使用像flux或redux这样的数据流库（这种情况要复杂得多，特别是对于这种情况）

对于1.您需要，正如您正确注意到的那样，输入组件的onChange处理程序，它是在Component中定义的函数，并传递给输入。如果您的输入组件是自己的组件而不是本机组件，则需要将onChange prop传递给本机输入。

Component中的函数接受输入，计算字符并使用setState设置内部状态变量（{charCount：#CountValue＃}）。然后你可以使用

重要的一点是：您正在使用无状态组件，因此您需要将InputWrap更改为正常的反应组件

class InputWrap extends React.Component {
  ...
}

希望这会给你正确的方向。

Answer 2

另一个优秀的解决方案就像redux但具有不同的架构和api https://github.com/mobxjs/mobx-react。

您可以使用inject HOC将共享状态注入应用程序中的任何反应组件。

在React.js中的嵌套子组件之间进行通信

2 个答案: