React - onChange 子组件答案

【问题标题】：React - onChange children componentReact - onChange 子组件
【发布时间】：2018-01-18 02:13:51
【问题描述】：

我试图弄清楚为什么 onChange 不能在子组件上工作，我有一个名为 AlertMethod 的组件，我从一个容器调用。

<AlertMethod
  onChange={this.methodSelected}
  label="Sms"
  value="sms"
/>

而methodSelected 只是一个console.log() 来测试是否被调用

methodSelected = (event, data) => {
  console.log(data);        
};

这里有一张图片可以更好地解释它。

所以最后那个函数它不会被调用。那是我的问题。

编辑

在我的容器AlertSystem.js 上，如果复选框被选中，我想更新一个状态，所以我的复选框组件是Checkbox.js，它是一个无状态函数，它接收 2 个道具 label 和 value 没什么特别的。所以在我的容器中，当我的Checkbox 组件更改时，更新我的状态，这就是为什么我在子组件上有一个onChange={this.methodSelected}，因为在methodSelected 函数中我会用 this.setState 和其他东西更新我的状态。

【问题讨论】：

标签： function reactjs components containers children

【解决方案1】：

您没有在 AlertMethod 中调用 props.onClick

【讨论】：

【解决方案2】：

您的子组件 AlertMethod 正在传递 onSubmit 属性，但未使用它。

应该看起来更像这样：

export const AlertMethod = ({ label, value, onClick }) => {
    return (
        <div>
            <Checkbox value={value} fluid label={label} onClick={onClick} />
        </div> 
    )
}

【讨论】：

但是我不想把道具传给我的孩子，我想知道我的容器什么时候改变我的孩子，我不知道我是否解释自己。
与我们分享更多代码，我想每个人都假设您正在尝试在您的孩子被点击时调用此方法。你到底想完成什么？
已编辑，现在您可以看到我需要做什么，我无法显示更多代码，因为它很简单，哈哈。
鉴于您的编辑，我的解决方案应该仍然有效。截至目前，您的活动实际上根本不附加任何东西。它只是被传递下来，需要连接到一个 html 元素。你在点击，但没有人在听！我的代码将把它传递给容器说“嘿，容器，我被点击了，你从这里做你需要做的事情”，它会在你的AlertSystem.js容器中处理事件。