获取 React 以在表单输入字段下显示单个错误消息 [英] Get React to display individual error messages under form input field

问题描述

我提交的表单会返回一系列错误，但我无法弄清楚如何让每个单独的错误出现在正确的输入字段下.现在所有错误都打印在每个输入字段下.我正在使用 react-bootstrap.任何帮助将不胜感激.

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

推荐答案

每个输入的错误信息应该单独存储和显示(也通过使用状态):

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

这篇关于获取 React 以在表单输入字段下显示单个错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！