Example for modifying the style of the input based on validation about react-form-with-constraints HOT 2 CLOSED

getInputBorderColor(fieldName: string) {
  let color = undefined;
  if (this.form !== null) { // On first render, this.form is null
    const field = this.form.fieldsStore.getField(fieldName);
    if (field.hasAnyFeedbacks()) { // More or less tells if the field is dirty (e.g. has been touched by the user)
      color = field.isValid() ? 'green' : 'red';
    }
  }
  return color;
}

// ...

<FormWithConstraints ref={formWithConstraints => this.form = formWithConstraints}
                     onSubmit={this.handleSubmit} noValidate>
  <input type="email" name="username" id="username"
         value={this.state.username} onChange={this.handleChange}
         required minLength={5}
         style={{borderWidth: '1em', borderColor: this.getInputBorderColor('username')}}
  />

  <input type="password" name="password" id="password"
         ref={password => this.password = password}
         value={this.state.password} onChange={this.handlePasswordChange}
         required pattern=".{5,}"
         style={{borderWidth: '1em', borderColor: this.getInputBorderColor('password')}}
  />
</FormWithConstraints>

const field = await this.form.validateFields(myField); // "field" being identical to "const field = this.form.fieldsStore.getField(...)"
this.setState({myFieldIsValid: field.isValid()});