Как получить данные из инпута в React.js?
Как получить данные из инпута в React.js?
2 ответа
от
dmitrypro77 ,
2 года назад
@nicolette.stoltenberg Создайте переменную для Вашего инпут поля в state и затем можно получние значение этой переменной и это и будет значение инпут поля в React, ниже пример кода:
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"; const Contact = () => { 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 <Contact />; } } ReactDOM.render(<App />, document.getElementById("container")); |
Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.
от
dan_farrell ,
год назад
@nicolette.stoltenberg
В React.js данные из инпута можно получить, используя состояние (state) компонента и обработчик события onChange на инпуте.
- Создайте состояние компонента, где хранится значение поля ввода:
1 2 3 |
state = {
inputValue: ''
}
|
- Создайте обработчик события onChange на инпуте, который будет обновлять значение состояния:
1 2 3 4 5 |
handleChange = (event) => {
this.setState({
inputValue: event.target.value
})
}
|
- Привязать состояние и обработчик к инпуту:
1 2 3 4 5 6 7 |
render() {
return (
<div>
<input type="text" value={this.state.inputValue} onChange={this.handleChange} />
</div>
)
}
|
Теперь значение из инпута можно получить из состояния компонента используя this.state.inputValue.
15