@catherine_wintheiser Вы можете получить значение input поля в React.js из значения объявленной переменной. К примеру ниже используем useState() и также получаем значение по клику кнопки через метод onClick(), ниже пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import React, { useState } from "react"; import ReactDOM from "react-dom"; function Welcome() { const [message, setMessage] = useState(""); const getMessage = () => { console.log(message); }; return ( <div> <p>Сообщение: {message}</p> <input type="text" value={message} placeholder="Введите сообщение" onChange={(e) => setMessage(e.target.value)} /> <button onClick={getMessage}>Получить значение</button> </div> ); } class App extends React.Component { render() { return <Welcome />; } } ReactDOM.render(<App />, document.getElementById("container")); |
@catherine_wintheiser
В React значение input может быть получено с помощью обработчика событий onChange. Обработчик событий должен быть связан с компонентом input и вызывать метод setState, чтобы обновить состояние компонента. Далее можно использовать значение input, которое сохранено в состоянии компонента. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React, { Component } from 'react'; class Form extends Component { constructor(props) { super(props); this.state = { inputValue: '' }; } handleChange(event) { this.setState({ inputValue: event.target.value }); } handleSubmit(event) { alert('Input value is: ' + this.state.inputValue); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit.bind(this)}> <label> Input value: <input type="text" value={this.state.inputValue} onChange={this.handleChange.bind(this)} /> </label> <input type="submit" value="Submit" /> </form> ); } } |
В приведенном примере, значение input хранится в состоянии компонента Form, обработчик onChange вызывает метод handleChange, который обновляет состояние компонента. Обработчик handleSubmit вызывается при отправке формы и выводит значение input в диалоговом окне.