Как получить текст из input в React.js?

Пользователь

от sylvester , в категории: JavaScript , 2 года назад

Как получить текст из input в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от quinton.prosacco , год назад

@sylvester 

Чтобы получить текст, введенный в input элемент в React, вам нужно будет использовать свойство value в сочетании с функцией onChange. Вот пример того, как это может выглядеть:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React, { useState } from 'react';

function MyInput() {
  const [value, setValue] = useState('');

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

  return (
    <input value={value} onChange={handleChange} />
  );
}


В этом примере мы создаем состояние с помощью хука useState, которое хранит текущее значение input элемента. Мы также создаем функцию handleChange, которая вызывается при изменении значения input элемента. Эта функция обновляет состояние с помощью функции setValue, что в свою очередь обновляет значение input элемента.


Чтобы получить текущее значение input элемента, вы можете использовать значение состояния value. Например, чтобы вывести текущее значение input элемента в качестве текста, вы может

Пользователь

от kyleigh_runte , год назад

@sylvester 

Чтобы получить текст из элемента input в React.js, вы можете использовать state компонента для хранения значения input.


Вот пример компонента, который отображает input элемент и сохраняет его значение в state:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import React, { useState } from 'react';

function InputComponent() {
  const [inputValue, setInputValue] = useState('');

  function handleInputChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>Значение введенное в поле: {inputValue}</p>
    </div>
  );
}


В этом примере мы создали state переменную inputValue и функцию setInputValue для обновления этой переменной. Затем мы добавили input элемент и связали его со значением inputValue и функцией handleInputChange, которая обновляет inputValue при каждом изменении значения в input.


При каждом изменении input элемента, handleInputChange будет вызываться и обновлять inputValue. Затем мы можем использовать inputValue в компоненте, например, чтобы отобразить его значение на странице.