Использование крючков React для получения входного значения

Привет! Сегодня мы узнаем, как использовать React Hooks простым способом, чтобы получить сильные основные фундаментальные крючки.

Первое, что нам нужно настроить, это, конечно, отреагировать среду JS, которую вы можете обратиться к их Документация Анкет Если все готово, то мы готовы идти!

Первый шаг

Давайте откроем файл проекта, затем откроем файл app.js, вы можете начать с импорта React и зацепите usestate, чтобы мы могли использовать его позже. Вот как это выглядит.

import React, { useState } from 'react'

Далее следует создавать функцию, называемую APP, здесь мы используем функциональный компонент, поэтому она выровнена, потому что мы собираемся использовать React Hooks.

function App(){

}
export default App;

Не забудьте импортировать его в конце нашего кода, чтобы он не создавал ошибки.

Второй шаг

function App(){
const [name, setName] = useState('')
const [password, setPassword] = useState('')
}

Там мы определяем имя, setName. Имя – это переменная, которую мы можем использовать для отображения значения. Между тем SetName – это метод сеттера, который мы можем использовать для изменения значения имени. USESTATE – это определение начального значения имени, он может быть пустой строкой, пустой массив, логический и т. Д. Чтобы получить лучшее объяснение крючков React, вы можете ссылаться на их Документы Анкет

Третий шаг

Нам нужно предоставить возврат внутри нашего компонента приложения, чтобы оно отобразило что -то на экране.

function App() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  return (
    

       setName(e.target.value)} />
       setPassword(e.target.value)}
      />
       handleInput()}>Input
      {name ? 
Welcome {name}!
 : ''}
    
  );
}

Выглядит ужасно? да. Успокойся, я объясню это.

• Итак, первое, что мы создаем тег div, который завершит все остальные элементы. Там я добавил стиль в тег div.
• Далее мы определяем два входных тега, кнопку с некоторым заполнителем в нем
• Затем мы определяем реквизиты OnChange внутри входного тега. Inside OnChange Reps мы определяем анонимную функцию, которая имеет параметр E, поэтому мы можем получить доступ к значению внутри входного тега. (Анонимная функция использует функцию стрелки, вы можете проверить ее через W3School, если вы еще не знакомы с ней.)
• Затем внутри анонимной функции мы называем метод сеттера, который я уже объясняю ранее, и мы также передаем параметр E -параметр внутри метода установки, поэтому значение имени изменяется каждый раз, когда значение внутри входного тега меняется.

const handleInput =  () =>{
    console.log(name, password)
  }

• Там я также добавляю кнопку с помощью метода ручки, чтобы только консоли. Получите ее, чтобы убедиться, что все работает.
• Под кнопкой я добавил тройной оператор, чтобы показать какой -то текст, если переменная имени что -то заполнено.

Вот взгляды всего кода, который мы пишем до сих пор.

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  const handleInput =  () =>{
    console.log(name, password)
  }

  return (
    

       setName(e.target.value)} />
       setPassword(e.target.value)}
      />
       handleInput()}>Input
      {name ? 
Welcome {name}!
 : ''}
    
  );
}
export default App

Оборачивает! Этим трем простым шагу достаточно, чтобы использовать крючки простым способом, чтобы начать работу и получить твердое базовое понимание о реализации крючков. Спасибо, что прочитали до этого момента, увидимся! ✨

Оригинал: “https://dev.to/tulusibrahim/using-react-hooks-to-get-input-value-4f25”