React - onChange子组件

时间:2017-08-10 02:14:05

标签: function reactjs components containers children

我试图找出为什么onChange不会对子组件工作,我有一个名为AlertMethod的组件,我从容器调用。

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

methodSelected它只是console.log()来测试是否被调用

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

这是一个可以更好地解释它的img。

enter image description here

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

  

修改

在我的容器上AlertSystem.js我想要更新状态,如果选中了复选框,那么我的复选框组件Checkbox.js它是无状态功能,它重现2道具labelvalue没什么特别的。因此,当我的Checkbox组件已更改时,在我的容器中更新了我的状态,这就是为什么我在子组件上有onChange={this.methodSelected}的原因,因为在methodSelected函数中更新了我的使用this.setState和stuff来说明。

2 个答案:

答案 0 :(得分:0)

您没有在AlertMethod中调用props.onClick

答案 1 :(得分:0)

您的子组件AlertMethod正在传递onSubmit道具但未使用它。

看起来应该更像这样:

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