otrimannja_danix_z_formi_react

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
otrimannja_danix_z_formi_react [2024/03/20 18:45]
tro 		otrimannja_danix_z_formi_react [2024/03/20 18:47] (текущий)
tro
Строка 34: Строка 34:
  
 **Варіант 2 (правильний)** **Варіант 2 (правильний)**
 +Створюємо функцію що передаємо як пропс до компоненти з формою
 <code> <code>
 const App = () => { const App = () => {
Строка 49: Строка 50:
       <LoginForm onLogin={handleLogin} />       <LoginForm onLogin={handleLogin} />
     </div>     </div>
 +  );
 +};
 +
 +</code>
 +
 +В компненті з формою отримуємо функцію що повинна щось зробити з данними з форми
 +<code>
 +const LoginForm = ({ onLogin }) => {
 +
 +  const handleSubmit = (evt) => {
 +    evt.preventDefault();
 +
 +    const form = evt.target;
 +    const { login, password } = form.elements;
 +
 +    // Викликаємо пропс onLogin
 +    onLogin({
 +      login: login.value,
 +      password: password.value,
 +    });
 +
 +    form.reset();
 +  };
 +
 +  return (
 +    <form onSubmit={handleSubmit}>
 +      <input type="text" name="login" />
 +      <input type="password" name="password" />
 +      <button type="submit">Login</button>
 +    </form>
   );   );
 }; };
  
 </code> </code>
  • /sites/data/attic/otrimannja_danix_z_formi_react.1710960335.txt.gz
  • Последнее изменение: 2024/03/20 18:45
  • — tro