#javascript #reactjs #ionic-framework #onsubmit
Вопрос:
При нажатии на кнопку «Добавить» в поле «Коды и» ниже » 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>
тегами.
Ответ №1:
Может быть, будет лучше, если вы отрисоваете кнопки отдельно и используете событие 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>
)
С помощью этого метода легче узнать, на какую кнопку было нажато.
Комментарии:
1. Я использую
<IonInput>
в форме сrequired
иpattern
атрибуты для проверки ввода. Используя поле CodeSandbox Аарона (ниже), проверка HTML-формы работает только при использовании с onSubmit. codesandbox.io/s/nifty-wood-kydby?file=/src/App.tsx Использование onClick с onSubmit также дало неожиданные результаты; onSubmit сработал до onClick.
Ответ №2:
используйте событие щелчка и отслеживайте 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>
);
};
Комментарии:
1. Я использую
<IonInput>
в форме сrequired
иpattern
атрибуты для проверки ввода. Используя ваш CodeSandbox (спасибо — мое редактирование ниже), я добавил эти атрибуты во ввод имени. Проверка HTML-формы работает только при использовании с onSubmit. Я также не смог успешно реализовать форму реакции-крючка. codesandbox.io/s/nifty-wood-kydby?file=/src/App.tsx Допустимый шаблон: «1ч20м» Использование onClick с onSubmit также дало неожиданные результаты; onSubmit сработал до onClick.2. Эта информация не была включена в первоначальный вопрос, какую структуру вы используете для обработки проверки?
3.
<ion-input pattern=.. />
Проверка является стандартной проверкой на стороне клиента HTML5: forum.ionicframework.com/t/… Этот пост на stephencharlesweiss.com четко описано, почему onSubmit необходим для решения этой проблемы с помощью onClick: stephencharlesweiss.com/…
Ответ №3:
Я смог использовать 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>
);
};