Блог

При нажатии на кнопку «Добавить» в поле «Коды и» ниже » Button event.nativeEvent.submitter =>возвращает следующее <button type="submit" style="display: none;"></button>

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

Возможно ли правильно определить ion-button <button> , что вызвало или вызвало событие отправки?
Правильная кнопка будет иметь aria-label=add или иметь «Добавить» между <ion-button> тегами.

Может быть, будет лучше, если вы отрисоваете кнопки отдельно и используете событие onClick?

Например:

 task amp;amp; (
    <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>
)
 

С помощью этого метода легче узнать, на какую кнопку было нажато.

используйте событие щелчка и отслеживайте id нажатие кнопки, вы все равно можете извлечь значения формы с помощью ссылок, см. Пример 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>
            )}
            amp;nbsp;
            {task ? "Delete" : "Clear"}
          </IonButton>
        </form>
      </IonContent>
    </IonPage>
  );
};
 

Я смог использовать reportValidity() в форме React ref внутри onClick функции и проверить, определен ли task объект, чтобы определить, какая кнопка была нажата:

Использование 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>            
          }
          amp;nbsp;
          {task
            ? "Update"            
            : "Add"            
          }        
          </IonButton>

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