пытаясь очистить все поля формы с помощью функции ловушки в React. Добавление объекта в событие onClick - PullRequest
Новая
       10

пытаясь очистить все поля формы с помощью функции ловушки в React. Добавление объекта в событие onClick

0 голосов
/ 18 января 2020

Я создал следующий хук в небольшом проекте React. import {useState} из «реагировать»; 

export default initialValue => {
  const [name, setValue] = useState(initialValue);

  const handleChange = e => {
    setValue(e.target.value);
  };

  const reset = () => {
    setValue("");
  };
  return [name, reset, handleChange];
};

Теперь в моем приложении. js Я импортировал хук. У меня есть следующий код, который использует ловушку для заполнения формы. 

import React from "react";
import useInputHook from "../Hooks/useFormState";
function App() {
const [name, setName, resetName] = useInputHook("");
const [surname, setSurname, resetSurname] = useInputHook("");
const [email, setEmail, resetEmail] = useInputHook("");

Эта проблема, с которой я сталкиваюсь, - это использование resetName, resetSurname и resetEmail для события onClick. очистить поля формы. Я получаю следующее error /src/components/App.jsx: Unexpected token, expected "..." (41:35) Ниже приведен код для формы. 

return (
<div className="container">
  <h1>
    Hello {name} {email}
  </h1>
  <h2>{email}</h2>
  <input
    onChange={setName}
    type="text"
    placeholder="What's your name?"
    value={name}
  />
  <input
    onChange={setSurname}
    type="text"
    placeholder="What's your surname?"
    value={surname}
  />
  <input
    onChange={setEmail}
    type="text"
    placeholder="What's your email?"
    value={email}
  />
  <button onClick={resetName} {resetSurname} {resetEmail}>Submit</button>
  </div>
 );
 }

Любая помощь будет оценена.

1 Ответ

1 голос
/ 18 января 2020

вы экспортировали как [value, reset function, change handler]

и импортировали как [value, change handler, reset function] (неправильный порядок)

кнопка сброса внизу должна активировать все функции сброса, как показано ниже:

<button onClick={()=>resetName();resetSurname();resetEmail();}>Submit</button>

  • , если вы настраиваете такие функции в кнопке, они станут подпоркой для кнопки и не будут выполняться, когда onClick срабатывает. это неправильно: <button onClick={resetName} {resetSurname} {resetEmail}>Submit</button>

вы можете попробовать сделать массив сброса функций или поиграть с функцией очистки useEffect.

счастливого реагирования!

...