Question

我正试图找出在React中执行以下操作的“正确”方法：

我的表单包含两个字段url和title。
每当url的值发生变化时，我都会对Embedly进行API调用，以检索有关该链接的元数据。
检索完元数据后，我想用结果更新title字段。

此处的难点在于url和title字段不在同一个组件中。这是表单的基本结构（我正在使用Formsy）：

<Formsy.Form onSubmit={this.submitForm} onChange={this.updateState} ref="form">
  {fields.map(field => <FormComponent 
    name={field.name}
    type={field.type}
    value={field.value}
  />)}
  <Button type="submit">Submit</Button>
</Formsy.Form>

正如您所看到的，表单循环遍历字段数组并为每个字段调用通用<FormComponent/>组件，这基本上是一个大的switch，然后调用相应的Formsy Component }基于字段type。

查询Embedly的逻辑已经在url字段的组件内部工作，但是我不确定是否有办法在仍然使用默认的Input组件时完成我想要的工作title？

Answer 1

[编辑：感谢Dan我能为第4步及以后提出更好的解决方案]

所以这就是我提出的解决方案。我不知道它是不是最好的模式，但至少到目前为止似乎有效。

第1步：向addToPrefilledValues组件添加<Form/>方法，该组件获取属性并将其添加到该组件上的prefilledValues对象中。国家。

第2步：将addToPrefilledValues添加到表单组件context，以便将该方法传递给所有子组件（注意：我也可以通过它作为道具，但上下文似乎更容易传递给孙子组件）。

第3步：每当收到来自Embedly的新元数据时，请<URLField/>组件调用addToPrefilledValues：

this.context.addToPrefilledValues({title: result.title, body: result.description});

第4步 [错误，请参见下文] ：在<TitleField/>组件的shouldComponentUpdate方法中，请注意对上下文并更新字段的值（如果它是空的）：

shouldComponentUpdate(nextProps, nextState, nextContext) {

  const nextTitle = nextContext.prefilledValues && nextContext.prefilledValues.title;
  const currentTitle = this.context.prefilledValues && this.context.prefilledValues.title;

  if (!!nextTitle && nextTitle != currentTitle && !this.input.getValue()) {
    this.input.setValue(nextTitle);
  }

  return true;
}

第4步（更好）：每当表单更改时，将所有表单的值存储在表单状态的currentValue对象中。

第5步：请看：

通过this.props传递的字段的原始值（即在数据库中）。
在字段中输入的当前值，如this.state.currentValue。
Embedly API调用生成的预填充值，如this.state.prefilledValue中所示。

找出哪一个是正确的（即，如果用户没有在该字段中输入任何内容，则预填充它，如果不是，则将其传递给表单字段子组件）。

这实现了预期的结果：

<URLField/>和<TitleField/>不必相互了解或沟通。
<Form/>也不必了解<URLField/>或<TitleField/>。

正如@ffxsam建议的那样，我应该只使用Redux Form ...

React：根据动态生成的格式

1 个答案: