Question

我创建了一个<Form>组件，该组件通过迭代遍历将value和onChange道具注入到表单域来控制您提供给它的所有表单域。对于我创建的大多数表单，这对我来说都工作得很好。

当我需要具有控制父状态的某些方面的表单域值的功能时，我向表单添加了一个onFormValueChange道具，只要字段值被更新，该道具就会被调用。使用此工具，我可以跟踪对表单状态所做的更改的子集。

但是，现在我的问题是...如何根据父项中发生的某些事件来覆盖表单字段的值。 我无法弄清楚如何仅覆盖一次表单状态。如果我给它提供一个设置诸如{name: string, value: any}之类的替代值的道具，那么在每次更新时，该替代值都会替代不佳的表单域值。

这些是我想到的解决方案，但是它们似乎非常笨拙，我希望SO社区中的某个人可以提供帮助。

在“表单组件”上设置一个覆盖属性，该属性会在100毫秒左右后超时，并希望用户不要在这么短的时间内尝试修改表单。但我不喜欢将setTimeout用于此类黑客。
将disableOverride属性与overrideValue函数一起传递。然后，在表单的shouldComponentUpdate中，我可以在将覆盖该值的disableOverride()的回调中调用setState。像这样：

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.override) {
      const { name, value } = nextProps.override;
      const newState = Object.assign({}, this.state, { [name]: value });
      this.setState(newState, () => {
        nextProps.disableOverride();
      });
      return false;
    }
    return true;
  }

但是这也感觉不必要的复杂，并且可能很容易意外崩溃。

编辑：需要进一步澄清：举例来说，如果我有“国家”和“城市”字段，那么如果清除了“国家”，则“城市”应该也要清除我可以使用onFormValueChange来跟踪“国家”的状态，但是没有API来修改表单状态以清除“城市”字段。

Answer 1

我想出了一个解决方案。这很荒谬，我不知道为什么花了我这么长时间。

form_for

componentDidUpdate(prevProps, prevState) { if (!isEqual(prevProps.override, this.props.override)) { const { name, value } = nextProps.override; this.setState({ [name]: value }); } }是来自lodash的对象比较功能

一次修改父级的子级状态

1 个答案: