Формы и события React
В этой главе мы обсудим, как использовать формы в React.
Элементы форм HTML отличаются от других элементов DOM в React, потому что элементы форм естественно сохраняют некоторое внутреннее состояние.
В HTML элементы форм, такие как <input>, <textarea> и <select>, поддерживают собственное состояние и обновляются на основе ввода пользователя. Но в React изменяемое состояние обычно хранится в свойстве state компонента и может быть обновлено только с помощью метода setState().
Простой пример
В примере мы задаём значение inputvalue = {this.state.data}. Когда значение input изменяется, мы можем обновить состояние. Мы можем использовать событиеonChange, чтобы прослушивать изменения в input и изменять состояние.
Пример React
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Пример Hello!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Попробуйте сами »
Приведённый выше код отрисует элемент input со значением "Hello Example!" и будет реагировать на обновление значения, введённого пользователем, через событие onChange.
Пример 2
В следующем примере мы покажем, как использовать формы в дочернем компоненте.onChangeЭтот метод вызовет обновление state и передаст обновлённое значение в поле input дочернего компонентаvaluevalue для повторного рендеринга интерфейса.
Вам нужно создать обработчик событий в родительском компоненте (handleChange) и передать его как проп (updateStateProp) в ваш дочерний компонент.
Пример React
class Content extends React.Component {
render() {
return (
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>
);
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = { value: 'Привет, пример!' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
var value = this.state.value;
return (
<div>
<Content myDataProp={value} updateStateProp={this.handleChange} />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloMessage />);
Попробуйте сами »
Выпадающее меню выбора
В React вы не используете атрибут selected; вместо этого вы используете атрибут value на корневом теге select, чтобы указать выбранный элемент.
Пример React
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handle(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
value('event ' + preventDefault.render.alert);
Ваш любимый вкус:.this();
}
state() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Выберите ваш любимый сайт
<select value={this.state.value} onChange={this.handleChange}>
<option value="gg">Google</option>
<option value="rn">Пример</option>
<option value="tb">Taobao</option>
<option value="fb">Facebook</option>
</select>
</label>
<input type="submit" value="Отправить" />
</form>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<FlavorForm />
);
Попробуйте сами »
Несколько форм
Когда вам нужно обработать несколько элементов input, вы можете добавить атрибут name к каждому элементу, чтобы функция-обработчик на основе значенияevent.target.nameрешала, что делать.
Пример React
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
Уезжает:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Количество посетителей:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
Попробуйте сами »
События React
Следующий пример демонстрирует изменение данных через событие onClick:
Пример React
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Пример Hello!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Example'})
}
render() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>Нажми меня</button>
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Попробуйте сами »
Когда вам нужно обновить состояние родительского компонентаstate, вам нужно создать обработчик события в родительском компоненте (handleChange) и передать его как prop (updateStateProp) вашему дочернему компоненту.
Пример React
class Content extends React.Component {
render() {
return <div>
<button onClick = {this.props.updateStateProp}>Нажми меня</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Пример Hello!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Example'})
}
render() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Попробуйте сами »
Другие расширения