如何在 Ionic React 多按钮表单中执行 HTML5 验证？答案

【问题标题】：How to perform HTML5 validation in Ionic React multi-button form?如何在 Ionic React 多按钮表单中执行 HTML5 验证？
【发布时间】：2021-09-01 05:29:45
【问题描述】：

点击下方CodeSandbox中的Add按钮时，event.nativeEvent.submitter返回如下Button => <button type="submit" style="display: none;"></button>

https://codesandbox.io/s/lingering-fog-pe7jl?file=/src/App.tsx

是否可以正确识别触发 onSubmit 事件的 ion-button 或 <button>？
正确的按钮将有aria-label=add 或在<ion-button> 标记之间有“添加”。

【问题讨论】：

标签： javascript reactjs ionic-framework onsubmit

【解决方案1】：

如果单独渲染按钮并使用onClick事件可能会更好？

例如：

task && (
    <IonButton aria-label="update" type="button" color="secondary" onClick={ onTaskClick }>
    <IonIcon icon={ arrowUpCircleOutline }></IonIcon>
         Update
    <IonButton>

    <IonButton aria-label="delete" type=button" color="danger" onClick={ onDeleteClick }>
    <IonIcon icon={ trashOutline }></IonIcon>
        Delete
    </IonButton>
)

使用这种方法，更容易知道点击了哪个按钮。

【讨论】：

我在表单中使用<IonInput> 和required 和pattern 属性来验证输入。使用 Aaron 的 CodeSandbox（如下），HTML 表单验证仅在与 onSubmit 一起使用时才有效。 codesandbox.io/s/nifty-wood-kydby?file=/src/App.tsx 使用 onClick 和 onSubmit 也会产生意想不到的结果； onSubmit 在 onClick 之前触发。

【解决方案2】：

使用点击事件并跟踪点击按钮的id，您仍然可以使用refs提取表单值，参见示例https://codesandbox.io/s/boring-babbage-y14zv?file=/src/App.tsx:415-2653

const Home: React.FC = () => {
  // const task: Task = {
  //   title: "Planning Tasks",
  //   time: "30m"
  // };
  const task = undefined;
  const nameRef = React.useRef<any>("");

  const onTaskSubmit = async (event: any) => {
    console.log(nameRef.current.value);
    console.log(event.target.id);

    switch (event.target.id) {
      case "update":
        console.log("Go to onTaskClick()");
        break;
      case "add":
        console.log("Go to onTaskClick()");
        break;
      case "delete":
        console.log("Go to onDeleteClick()");
        break;
      case "reset":
        nameRef.current.value = "";
        break;
    }
  };

  return (
    <IonPage id="home-page">
      <IonHeader>
        <IonToolbar>
          <IonTitle>Task Planner</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tasks</IonTitle>
          </IonToolbar>
        </IonHeader>

        <form>
          <IonItem>
            <IonInput ref={nameRef} placeholder={"Enter Name"}></IonInput>
          </IonItem>

          {task ? (
            <IonButton
              aria-label={"update"}
              id={"update"}
              color={"secondary"}
              onClick={onTaskSubmit}
            >
              <IonIcon icon={arrowUpCircleOutline} slot="start"></IonIcon>
              {"Update"}
            </IonButton>
          ) : (
            <IonButton
              aria-label={"add"}
              id={"add"}
              color={"primary"}
              onClick={onTaskSubmit}
            >
              <IonIcon icon={addCircleOutline} slot="start"></IonIcon>
              {"Add"}
            </IonButton>
          )}

          <IonButton
            aria-label={task ? "delete" : "clear"}
            color="danger"
            id={task ? "delete" : "clear"}
          >
            {task ? (
              <IonIcon icon={trashOutline}></IonIcon>
            ) : (
              <IonIcon icon={closeCircleOutline}></IonIcon>
            )}
            &nbsp;
            {task ? "Delete" : "Clear"}
          </IonButton>
        </form>
      </IonContent>
    </IonPage>
  );
};

【讨论】：

我在表单中使用<IonInput> 和required 和pattern 属性来验证输入。使用您的 CodeSandbox（感谢 - 我在下面的编辑），我将这些属性添加到 Name 输入中。 HTML 表单验证仅在与 onSubmit 一起使用时才有效。我也无法成功实现 react-hook-form。 codesandbox.io/s/nifty-wood-kydby?file=/src/App.tsx 有效模式：“1h20m” 使用 onClick 和 onSubmit 也产生了意想不到的结果； onSubmit 在 onClick 之前触发。
原始问题中未包含该信息，您使用什么框架来处理验证？
<ion-input pattern=.. /> 验证是标准的 HTML5 客户端验证：forum.ionicframework.com/t/… stephencharlesweiss.com 上的这篇文章清楚地详细说明了为什么需要 onSubmit 而不是针对此问题的 onClick 解决方案：stephencharlesweiss.com/…

【解决方案3】：

我能够在 onClick 函数内的 React ref 表单上使用 reportValidity() 并检查是否定义了 task 对象以确定单击了哪个按钮：

在 React 表单中使用 onSubmit 会产生不可预知的结果。

const Home: React.FC = () => {
  // const task: Task = {
  //   time: "30m"
  // };
  const task = undefined;

  const taskForm = useRef<HTMLFormElement>(null);
  const timeEl = useRef<any>('time');

  const onTaskClick = () => {
    if (! taskForm?.current?.reportValidity()) return;
    let taskData: Task = {
      time: (timeEl.current).value
    }

    if (task) {
      // update Task
    } else {
      // add Task
    }
  }

  return (
    <IonPage id="home-page">
      <IonHeader>
        <IonToolbar>
          <IonTitle>Task Planner</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tasks</IonTitle>
          </IonToolbar>
        </IonHeader>

        <form ref={taskForm}>
          <IonInput ref={timeEl} value={task?.time} placeholder="Time" type="text" required={true} pattern="[\d+h]?[\d+m]?" />

          <IonButton onClick={onTaskClick} type="submit" color={task ? "secondary" : "primary"}>        
          {task
            ? <IonIcon icon={arrowUpCircleOutline}></IonIcon>
            : <IonIcon icon={addCircleOutline}></IonIcon>            
          }
          &nbsp;
          {task
            ? "Update"            
            : "Add"            
          }        
          </IonButton>

          <IonButton onClick={onDeleteClick} type={task ? "submit" : "reset"} color="danger">              
          {task
            ? <IonIcon icon={trashOutline}></IonIcon>
            : <IonIcon icon={closeCircleOutline}></IonIcon>            
          }
          &nbsp;
          {task
            ? "Delete"            
            : "Clear"            
          }
          </IonButton>
        </form>
      </IonContent>
    </IonPage>
  );
};

【讨论】：