Get React to display individual error messages under form input field

问题

I'm submitting a form that returns an array of errors and I'm having trouble figuring out how to get each individual error to appear under the correct input field. Right now all the errors print under each input field. I'm using react-bootstrap. Any help would be appreciated.

getValidationState() {
  var errors = this.state.errors;
  if (!$.isEmptyObject(errors))
  {
    errors.forEach(function(error) {
      console.log("error:", error.name);
    });
  }
}

render() {
  const inputProps = {
    value: this.state.address,
    onChange: this.onChange,
  }
  return (
    <form onSubmit={this.handleSubmit.bind(this)}>
      <FormGroup
        validationState={this.getValidationState()} >
        <FormControl
          type="text"
          name="firstName"
          value={this.state.firstName}
          placeholder="First name"
          onChange={this.handleChange}
        />
        <FormControl.Feedback />
        {this.state.errors && this.state.errors.length &&
          <HelpBlock>
            {this.state.errors.map((error, i) => <p key={i}>HEllo{error.value}</p>)}
          </HelpBlock>
        }


      </FormGroup>
      <FormGroup >
        <FormControl
          type="text"
          name="lastName"
          value={this.state.lastName}
          placeholder="Last name"
          onChange={this.handleChange}
        />
        {this.state.errors && this.state.errors.length &&
          <HelpBlock>
            {this.state.errors.map((error, i) => <p key={i}>HEllo{error.value}</p>)}
          </HelpBlock>
        }
      </FormGroup>


      <FormGroup >
        <Button type="submit">
          Save
        </Button>
      </FormGroup>
    </form>
  )
}

回答1:

The error message for each input should be stored and displayed separately (by using state, too):

constructor(props){
  super(props)
  this.state = {
      firstNameErr: '',
      lastNameErr: '',
  }
  this.getValidationState = this.getValidationState.bind(this);
}

getValidationState() {
  var errors = this.state.errors;
  if (!$.isEmptyObject(errors))
  {
    var firstErr = '';
    var lastErr = '';
    errors.forEach((error) => {
      console.log("error:", error.name);
      // Check each error to see which input it belongs to
      // NOTE: please also consider using error.name instead, if error.message is invalid, thanks!
      if(error.message.indexOf('firstName') != -1){
        firstErr = error.message;
      }
      if(error.message.indexOf('lastName') != -1){
        lastErr = error.message
      }     

    });

    this.setState({
      firstNameErr: firstErr,
      lastNameErr: lastErr,
    });

  }
}

render() {
  const inputProps = {
    value: this.state.address,
    onChange: this.onChange,
  }
  return (
    <form onSubmit={this.handleSubmit.bind(this)}>

      <FormGroup
        validationState={this.getValidationState()} >
        <FormControl
          type="text"
          name="firstName"
          value={this.state.firstName}
          placeholder="First name"
          onChange={this.handleChange}
        />
        <FormControl.Feedback />
        <HelpBlock>
          <p className="text-danger">{this.state.firstNameErr}</p>
        </HelpBlock>
      </FormGroup>

      <FormGroup >
        <FormControl
          type="text"
          name="lastName"
          value={this.state.lastName}
          placeholder="Last name"
          onChange={this.handleChange}
        />
        <HelpBlock>
          <p className="text-danger">{this.state.lastNameErr}</p>
        </HelpBlock>
      </FormGroup>


      <FormGroup >
        <Button type="submit">
          Save
        </Button>
      </FormGroup>
    </form>
  )
}

That is the idea, in case it doesn't work yet, please show me here some errors in your console, thanks

来源：https://stackoverflow.com/questions/43930022/get-react-to-display-individual-error-messages-under-form-input-field