0a1eeea424
* fix: replace sh with shell fix replace terminal with shell fix replace node with js fix replace output with shell fix replace cs with csharp fix replace c++ with cpp fix replace c# with csharp fix replace javasctipt with js fix replace syntax with js fix replace unix with shell fix replace linux with shell fix replace java 8 with java fix replace swift4 with swift fix replace react.js with jsx fix replace javascriot with js fix replace javacsript with js fix replace c++ - with cpp fix: corrected various typos fix: replace Algorithm with nothing fix: replace xaml with xml fix: replace solidity with nothing fix: replace c++ with cpp fix: replace txt with shell fix: replace code with json and css fix: replace console with shell
2.6 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Create a Controlled Form | Создание управляемой формы |
Создание управляемой формы
Создание управляемой формы - это тот же процесс, что и создание управляемого ввода, за исключением необходимости обрабатывать событие отправки.
Во-первых, создайте управляемый вход, который сохраняет свое значение в состоянии, так что есть один источник истины. (Это то, что вы делали в предыдущем вызове.) Создайте элемент ввода, установите его атрибут value в переменную ввода, находящуюся в состоянии. Помните, что состояние доступно через this.state . Затем установите атрибут onChange элемента ввода, чтобы вызвать функцию 'handleChange'.
Решение
<input value={this.state.input} onChange={this.handleChange}/>
Затем создайте метод handleSubmit для вашего компонента. Во-первых, поскольку ваша форма отправляется, вам придется не обновлять страницу. Во-вторых, вызовите метод setState() , передавая в объект разные пары ключ-значение, которые вы хотите изменить. В этом случае вы хотите установить 'submit' в значение переменной 'input' и установить 'input' в пустую строку.
handleSubmit(event) {
event.preventDefault();
this.setState({
input: '',
submit: this.state.input
});
}
Теперь, когда ваши данные обрабатываются в состоянии, мы можем использовать эти данные. Создайте элемент h1 . Внутри вашего элемента h1 переменную 'submit'. Помните, что «submit» находится в состоянии, поэтому вам нужно использовать this.state . Кроме того, для размещения переменной в JSX требуются фигурные скобки { } поскольку это JavaScript.
<h1>{this.state.submit}</h1>