首页 文章

当多个子项同时发送事件时,更新组件父级的反应状态

提问于
浏览
0

我正在使用ReactJs和Redux .

有一个父组件,它有几个孩子 . 子项只是具有内置验证的输入元素 .

<ParamInput
  type="number"
  value={item.capacity}
  name="capacity"
  min="1"
  validators={[Validator.required]}
  onValidation={this.validate}
/>

我希望家长知道哪些孩子无效 .

为此,每个孩子都可以触发“onValidate”事件,父母监听此事件并收集他所在状态的验证数据 . 如果一次由一个孩子触发验证事件,这非常有效 .

但是,一旦有几个孩子同时触发这个事件,我就遇到了问题 . 例如,我在子组件的componentDidMount中运行onValidation,以了解初始值的验证信息 .

父处理事件并更新其状态:

validate(isValid, propertyName) {
    const newValidityState = { ...this.state.validity, ...{[propertyName]: isValid} };
    this.setState({validity : newValidityState });
    }

问题是以下组合:

将同时为每个孩子调用

  • 'validate'

  • 我修改了this.state.validity的现有值

  • 'setState'不会立即发生

因此,到最后状态将只有关于最后一个调用'onValidate'的子节点的数据,因为在创建'newValidityState'时this.state.validity没有从其他状态变化获得更新 .

我怎么能克服这个?我知道我可以使用setState的promises,但我不知道如何在这种情况下应用它们 .

将不胜感激您的建议 .

1 回答

  • 0

    这可能不是一个理想的解决方案 . 但试一试 . 而不是更新状态的有效性,状态应该具有每个ParamInput的属性,例如: validation_propertyName ,其值应该是布尔值,表示有效性 .

    validate(isValid, propertyName) {
         this.setState({["validation_"+propertyName]: isValid });
    }
    

相关问题