В этом руководстве мы покажем вам, как использовать переключатели в React.js, и приведем пример. Мы рассмотрим все необходимые шаги, от создания простого переключателя до обработки события изменения. Мы также покажем вам, как использовать переключатели для сбора пользовательского ввода.
В этом примере мы возьмем простой «пол» с переключателем «мужской» и «женский» и добавим событие onchange с помощью handleChange(), после чего присвоим значение массиву переменных состояния. Затем в событии отправки мы возьмем эти значения с переменной состояния.
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
gender: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({gender: event.target.value});
}
handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}
render() {
return (
<div>
<h1>React Radio Buttons onChange Example</h1>
<form onSubmit={this.handleSubmit}>
<strong>Select Gender:</strong>
<label>
<input
type="radio"
value="male"
onChange={this.handleChange}
/>Male
</label>
<label>
<input
type="radio"
value="female"
onChange={this.handleChange}
/>Female
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Выход:
Удачного кодирования!!!