React：根据动态生成的表单中的其他字段更新字段值

Question

I'm trying to find out the "proper" way to do the following in React:

• I have a form with two fields, url and title .
• Whenever url 's value changes, I make an API call to Embedly to retrieve metadata about the link.
• Once the metadata has been retrieved, I want to update the title field with the result.

The difficulty here is that the url and title fields are not in the same component. Here's the basic structure of the form (I'm using 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>

As you can see, the form loops over an array of fields and calls a generic <FormComponent/> component for each of them, which is basically a big switch that then calls the appropriate Formsy Component based on the field's type .

The logic for querying Embedly is already working inside the component for the url field, but I'm not sure if there's a way to accomplish what I want while still using the default Input component for title ?

Answer 1

[Edit: thanks to Dan I was able to come up with a better solution for step 4 and after]

So here's the solution I came up with. I have no clue if it's the best pattern or not, but at least so far it seems to work.

Step 1 : add a addToPrefilledValues method to the <Form/> component that takes a property and adds it to the prefilledValues object on that component's state.

Step 2 : add addToPrefilledValues to the form component's context so that the method is passed on to all child components (note: I could also pass it as a prop but context seems easier to pass it on to grandchild components).

Step 3 : make my <URLField/> component call addToPrefilledValues whenever it receives new metadata from Embedly:

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

Step 4 [Wrong, see below] : in the <TitleField/> component's shouldComponentUpdate method, watch for changes to the context and update the field's value (if it's empty):

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;
}

Step 4 (better) : whenever the form changes, store all of the form's values in a currentValue object on the form's state.

Step 5 : Look at:

1. the original value of the field (ie in the database), as passed through this.props ).
2. the current value being typed in the field, as found in this.state.currentValue .
3. the prefilled value generated by the Embedly API call, as found in this.state.prefilledValue .

Figure out which one is correct (ie if the user hasn't entered anything in the field prefill it, if not don't) and pass that on to the form field child component.

This achieves the desired result:

• <URLField/> and <TitleField/> don't have to know about or communicate with each other.
• <Form/> doesn't have to know about <URLField/> or <TitleField/> either.

As @ffxsam suggested though, I should probably just use Redux Form…