在输入字段中输入值时如何显示建议？

Question

我正在做一个小型的React项目，最近正在处理API调用。我的目标是，我想在输入字段下方显示建议。我的意思是，如果我们在输入字段中输入名称，则建议应显示名称不应超过15个字符，一旦输入值，建议应消失。有人可以在这个查询中为我提供帮助吗？

这是我的代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
      isName: true,
      error: ""
    };
  }

  ValidName = () => {
    const regex = new RegExp("([a-zA-Z])+$");
    this.setState({
      isName: regex.test(this.state.name)
    });
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  hSave = event => {
    event.preventDefault();
    const data = { name: this.state.name };
    axios
      .post(`/api/Addcontact`, data, {
        headers: { "Content-Type": "application/json" }
      })
      .then(res => {
        if (res.status == 200) {
          this.props.history.push("/Contact");
        } else {
          this.setState({ error: res });
          console.log(res);
        }
      });
  };
  render() {
    return (
      <div>
        <Form size="large">
          <Segment stacked>
            <Label className="contactLabel">*Name</Label>
            <Form.Input
              fluid
              className={`${this.state.isName ? "" : "error"} saveContact`}
              placeholder="Full Name"
              name="name"
              onChange={this.handleChange}
              onBlur={this.ValidName}
              value={this.state.name}
            />
            {this.state.isName ? (
              ""
            ) : (
              <div className="contactError">* Invalid Name</div>
            )}

{error ? <div>{error}</div> : ""}

            <Button
              color="teal"
              className="saveContactbtn"
              onClick={this.hSave}
            >
              Save
            </Button>
          </Segment>
        </Form>
      </div>
    );
  }
}
export default App;

我无法弄清楚如何显示输入字段的建议！

Answer 1

说明

您需要验证服务/库来实现您的以下需求：
1.显示与用户输入值有关的信息
2.一旦输入符合条件，使其消失（字体/其他CSS样式）

实施

可选的验证库：react-hook-form

示例：

Answer 2

尝试此代码。希望对您有帮助。但这是手动验证。

import React, { Component } from 'react'

class AddUser extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
      errors: {},
    };
    this.handleUsername = this.handleUsername.bind();
    this.handleAddUser = this.handleAddUser.bind();
  }

   //UserName change event
  handleUsername(event) {
    let userName = event.target.value;
    let errors = {};
    let lastAt = userName.lastIndexOf('@');
    let lastDot = userName.lastIndexOf('.');

    if (!(lastAt < lastDot && lastAt > 0 && userName.indexOf('@@') === -1 && lastDot > 2 && (userName.length - lastDot) > 2)) {
      errors["username"] = "Your email is required and it should be valid ";
    }

    this.setState({
      userName: event.target.value,
      errors: errors,
    });
  }

  //ADD user button on click
  handleAddUser = () => {
    let formIsValid = true;
   //TODO :formIsValid needs to false when you have validation errors

    if (formIsValid) {
      //TODO :API call for submit 
    }
  };


  render() {
    return (
      <div className="user-sidebar sidebar-nav has-header">
        <form name="addUserForm">
          <div className="form-group">
            <div className="col-sm-4">
              <label className="control-label" htmlFor="username">User Name: </label>
            </div>
            <div className="col-sm-8">
              <input className="form-control" name="username" placeholder="Username" autoFocus required value={this.state.userName} onChange={this.handleUsername} />
              <span className="error-message">{this.state.errors["username"]}</span>
            </div>
          </div>

          <div className="form-group">
             <button type="button" className="btn btn-primary" onClick={() => { this.handleAddUser(this) }}><i className="fa fa-plus"></i> Add User</button>
          </div>
        </form>

      </div>
    )
  }
}