Question

在验证正则表达式条件和最大长度条件之后，我想在输入文本的右侧显示警告消息。

在验证每个条件后，我已经显示警告消息，并保存并显示数据。警告消息非常难看，我想在输入文本的右侧显示警告消息。

这是我的代码和框链接： https://codesandbox.io/s/l4j34xm3w9

这是我的React JS代码：

import React from "react";

import "./styles.css";

export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayMessage: "Enter the user name",
      userName: ""
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    var onlyTextRegex = /[^A-Za-z]/g;
    if (event.target.value.match(onlyTextRegex)) {
      alert("Tape only text");
    } else if (event.target.value.length > 20) {
      alert("Max length 20");
    } else {
      this.setState({ userName: event.target.value });
    }
  }

  render() {
    return (
      <div className="displayCard">
        <div className="bgCreditCard">
          <div className="titleCard">
            <h1>Credit card</h1>
          </div>
          <div className="simCard">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
              alt=""
            />
          </div>
          <div className="idCard">
            <h2 className="idCardNumber">7253 3266 5284 8621</h2>
          </div>
          <div className="userCard">
            <div className="userCardID">5422</div>
            <div className="userCardValidation">
              <div className="bloc1">
                Valid <br />
                thru
              </div>
              <div className="bloc2">
                month/year
                <br />
                <span>15/11</span>
              </div>
            </div>
          </div>
          <div className="userCardDescription">{this.state.userName}</div>
          <div className="cardType">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
              alt=""
            />
          </div>
        </div>
        <div className="inputInterface">
          <input
            type="text"
            placeholder={this.state.displayMessage}
            onChange={this.handleChange}
          />
        </div>
      </div>
    );
  }
}

Answer 1

使用您的代码，我创建了一个沙箱，将消息放在输入字段下方，请检查-https://codesandbox.io/s/4wy74rj4wx

我已向您的state添加了一个新值对象，其中包含一条消息和一个状态。如果状态不正确，则该消息将显示在输入字段下方的span中

import React from "react";

import "./styles.css";

export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayMessage: "Enter the user name",
      userName: "",
      valid: {
        status: true,
        message: ""
      }
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    var onlyTextRegex = /[^A-Za-z]/g;
    if (event.target.value.match(onlyTextRegex)) {
      this.setState({ valid: { status: false, message: "Tape only text" } });
    } else if (event.target.value.length > 20) {
      this.setState({ valid: { status: false, message: "Max length 20" } });
    } else {
      this.setState({
        userName: event.target.value,
        valid: { status: true, message: "" }
      });
    }
  }

  render() {
    const { valid } = this.state;
    return (
      <div className="displayCard">
        <div className="bgCreditCard">
          <div className="titleCard">
            <h1>Credit card</h1>
          </div>
          <div className="simCard">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
              alt=""
            />
          </div>
          <div className="idCard">
            <h2 className="idCardNumber">7253 3266 5284 8621</h2>
          </div>
          <div className="userCard">
            <div className="userCardID">5422</div>
            <div className="userCardValidation">
              <div className="bloc1">
                Valid <br />
                thru
              </div>
              <div className="bloc2">
                month/year
                <br />
                <span>15/11</span>
              </div>
            </div>
          </div>
          <div className="userCardDescription">{this.state.userName}</div>
          <div className="cardType">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
              alt=""
            />
          </div>
        </div>
        <div className="inputInterface">
          <input
            type="text"
            placeholder={this.state.displayMessage}
            onChange={this.handleChange}
          />
          {!valid.status ? (
            <span style={{ color: "#ff0000" }}>{valid.message}</span>
          ) : null}
          <input type="text" />
          <input type="text" />
        </div>
      </div>
    );
  }
}

确认条件后显示警告消息

1 个答案: