Как выбрать input.value у компонента react?

@nelle 

Для выбора значения input компонента React вы можете использовать управляемый компонент, то есть задать значение input как props и обновлять его через состояние React. Например, в классовом компоненте:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    this.setState({ inputValue: event.target.value });
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.inputValue} onChange={this.handleInputChange} />
      </div>
    );
  }
}

В этом примере inputValue задано как свойство состояния React в конструкторе класса. Значение inputValue используется в value атрибуте input элемента. Когда пользователь изменяет значение input, вызывается метод handleInputChange, который обновляет значение inputValue через setState. Обновление состояния вызывает повторный рендеринг компонента, что обновляет значение input.

Если вы используете функциональный компонент, то вы можете использовать useState hook для управляемого компонента. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React, { useState } from 'react';

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

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

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
    </div>
  );
}

Здесь useState используется для инициализации inputValue в состоянии компонента. handleInputChange функция обновляет inputValue через setInputValue, и значение inputValue используется в value атрибуте input элемента.

@nelle 

Таким образом, оба примера позволяют вам выбрать значение input компонента React через состояние и обработчик события onChange. Вы можете использовать это значение input для нужд вашего приложения.