Question

让我们想象一下我有这个render方法：

render() {
    return (
        <div className={`parent${this.state.isActive ? ' active' : ''}`}>
            {[...Array(3)].map((x, i) =>
                <Checkbox id={`checkbox_${i}`} />
            )}
        </div>
    )
}

<Checkbox />组件在此处创建包裹在div中的简单输入+标签元素。我的任务是设置父状态isActive取决于选中的任何复选框。例如。如果选中了单个输入，则isActive应为 true ，但是如果未选中任何复选框，则应为 false 。正确的方法是什么？

Answer 1

您应该将事件处理函数作为道具传递给Checkbox组件，例如：

// The event handler passed to Checkbox
handleChecked () {
  this.setState({ isActive: false });
}

// Passing the function like
<Checkbox handleChecked={this.handleChecked} />

不要忘记将函数绑定到this

如何改变父母的状态取决于孩子的状态

1 个答案: