React Multi Step Forms - HMTL 警告不起作用

Question

我正在使用 React 构建一个多步骤表单，并遵循 CSS Tricks 和 Brad Traversy 的 video 和 code 的方法

除了在未填写所需字段或用户输入的值低于允许的最小值等时显示 html 警告外，一切正常。

我可以使用 javascript 对此进行编码，但这将非常耗时，因为根据所选选项在表单上呈现不同的（必需）字段。

以下是我的其中一个组件的代码摘要：

export class EventDetails extends Component {
  continue = (e) => {
    this.props.nextStep();
  };

  render() {
    const { values } = this.props;
    return (
      <form>
        <h2>Event Details</h2>
        <div>
          <input
            required
            value={values.title}
            onChange={(event) => this.props.changeField(event, "title")}
            type="text"
            placeholder="Event Name"
          />
        </div>

        <div>
          <textarea
            value={values.description}
            required
            onChange={(event) => this.props.changeField(event, "description")}
            type="text"
            placeholder="Describe the event"
          />
        </div>

        <div>
          <select
            required
            value={values.region}
            onChange={(event) => this.props.changeField(event, "region")}
          >
            <option value="" disabled>
              Select your Region
            </option>
            <option value="dublin">Dublin</option>
            <option value="cork">Cork</option>
            <option value="other">Other</option>
          </select>
        </div>

        <div>
          <input
            required
            value={values.venue}
            onChange={(event) => this.props.changeField(event, "venue")}
            type="text"
            placeholder="Name of Venue"
          />
        </div>

        <div>
          <input
            required
            value={values.address1}
            onChange={(event) => this.props.changeField(event, "address1")}
            type="text"
            placeholder="Street Address"
          />
        </div>

        <div>
          <input
            required
            value={values.address2}
            onChange={(event) => this.props.changeField(event, "address2")}
            type="text"
            placeholder="Address Line 2"
          />
        </div>

        <div>
          <input
            value={values.address3}
            onChange={(event) => this.props.changeField(event, "address3")}
            type="text"
            placeholder="Address Line 3 (optional)"
          />
        </div>

        <div>
          <input
            value={values.address4}
            onChange={(event) => this.props.changeField(event, "address4")}
            type="text"
            placeholder="Address Line 4 (optional)"
          />
        </div>

        <div>
          <DatePicker
            timeIntervals={15}
            selected={values.startDetails}
            onChange={(event) => this.props.changeField(event, "startDetails")}
            showTimeSelect
            dateFormat="Pp"
            required
            placeholderText={"Date & Time Event Starts"}
          />
        </div>

        <div>
          <DatePicker
            timeIntervals={15}
            selected={values.endDetails}
            onChange={(event) => this.props.changeField(event, "endDetails")}
            showTimeSelect
            dateFormat="Pp"
            required
            placeholderText={"Date & Time Event Ends"}
          />
        </div>

        <div>
          <input
            value={values.eventPassword}
            required
            onChange={(event) => this.props.changeField(event, "eventPassword")}
            type="password"
            placeholder="password to check customers in"
          />
        </div>

        <button onClick={(event) => this.continue(event)}>Continue</button>
      </form>
    );
  }
}

export default EventDetails;

如果未填写必填字段，如何显示常见的 HTML 警告并防止表单进入下一步？

Answer 1

如果通过弹出窗口，您的意思是在带有消息的任何地方的框中进行实际的视觉显示，我相信您必须自己开发或使用类似 Material-UI 的库，在此处找到 https://material-ui.com/

更新：

以下是您可以使用的一些 HTML5 属性。我希望这就是您的要求。

<form action="/action_page.php">
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
  
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
  
  <label for="name">required field:</label>
  <input type="text" id="name" name="name" required><br><br>

  <input type="submit" value="Submit">
</form>

如果您想在 reactjs 中执行此操作，这里有一篇快速文章可供使用：https://codeburst.io/how-to-use-html5-form-validations-with-react-4052eda9a1d4

这只是您可能缺少的一些东西。看看这个沙盒它有一个例子https://codesandbox.io/s/o74l63l8v5?from-embed

如果这有帮助，请告诉我。