151 lines
6.1 KiB
Markdown
151 lines
6.1 KiB
Markdown
---
|
||
id: 5a24c314108439a4d4036178
|
||
title: Створення контрольованого вводу
|
||
challengeType: 6
|
||
forumTopicId: 301385
|
||
dashedName: create-a-controlled-input
|
||
---
|
||
|
||
# --description--
|
||
|
||
Ваш додаток може мати набагато складніші взаємодії між `state` і відображеним інтерфейсом користувача. Для прикладу, керування елементами форми для введення тексту, такими як `input` та `textarea`, зберігає їх власний стан у DOM в якості типу користувача. За допомогою React, ви можете перемістити цей незмінний стан до компоненту React `state`. Вхід користувача стає частиною програми `state`, отож React контролює значення цього поля вводу. Зазвичай, якщо у вас є компоненти React із полями вводу, в які користувач може друкувати, це буде контрольована форму вводу.
|
||
|
||
# --instructions--
|
||
|
||
Редактор коду має каркас компонента із назвою `ControlledInput` для створення контрольованого `input` елементу. `state` компоненту вже ініціалізовано із `input` властивістю, яка містить порожній рядок. Це значення являє собою текст, який друкує користувач у поле `input`.
|
||
|
||
По-перше, створіть метод із назвою `handleChange()`, який має параметр із назвою `event`. Коли викликається метод, він отримує `event` об'єкт, що містить в собі рядок тексту з `input` елементу. Ви можете отримати доступ до цього рядка з `event.target.value` всередині методу. Оновіть `input` властивості `state` компонента за допомогою нового рядка.
|
||
|
||
У методі `render` створіть `input` елемент над тегом `h4`. Додайте атрибут `value`, який дорівнює властивості `input` `state` компоненту. Тоді додайте `onChange()` набір обробника подій до методу `handleChange()`.
|
||
|
||
Коли ви друкуєте у полі вхідних даних, цей текст обробляється методом `handleChange()`, встановленим як властивість `input` у локальному `state`, і відображається в якості значення у `input` полі на сторінці. Компонент `state` є єдиним джерело істини стосовно вхідних даних.
|
||
|
||
Останнє, проте важливе - не забудьте додати необхідні прив'язки до конструктора.
|
||
|
||
# --hints--
|
||
|
||
`ControlledInput` повинен повертати `div` елемент, який містить в собі `input` та тег `p`.
|
||
|
||
```js
|
||
assert(
|
||
Enzyme.mount(React.createElement(ControlledInput))
|
||
.find('div')
|
||
.children()
|
||
.find('input').length === 1 &&
|
||
Enzyme.mount(React.createElement(ControlledInput))
|
||
.find('div')
|
||
.children()
|
||
.find('p').length === 1
|
||
);
|
||
```
|
||
|
||
Стан `ControlledInput` має ініціалізуватись із допомогою властивості `input` встановленої у порожній рядок.
|
||
|
||
```js
|
||
assert.strictEqual(
|
||
Enzyme.mount(React.createElement(ControlledInput)).state('input'),
|
||
''
|
||
);
|
||
```
|
||
|
||
Друкування у вхідному елементі повинне оновлювати стан і значення вхідних даних, а `p` елемент повинен відображати цей стан згідно з тим, що ви друкуєте.
|
||
|
||
```js
|
||
async () => {
|
||
const waitForIt = (fn) =>
|
||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
|
||
const mockedComponent = Enzyme.mount(React.createElement(ControlledInput));
|
||
const _1 = () => {
|
||
mockedComponent.setState({ input: '' });
|
||
return waitForIt(() => mockedComponent.state('input'));
|
||
};
|
||
const _2 = () => {
|
||
mockedComponent
|
||
.find('input')
|
||
.simulate('change', { target: { value: 'TestInput' } });
|
||
return waitForIt(() => ({
|
||
state: mockedComponent.state('input'),
|
||
text: mockedComponent.find('p').text(),
|
||
inputVal: mockedComponent.find('input').props().value
|
||
}));
|
||
};
|
||
const before = await _1();
|
||
const after = await _2();
|
||
assert(
|
||
before === '' &&
|
||
after.state === 'TestInput' &&
|
||
after.text === 'TestInput' &&
|
||
after.inputVal === 'TestInput'
|
||
);
|
||
};
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --after-user-code--
|
||
|
||
```jsx
|
||
ReactDOM.render(<ControlledInput />, document.getElementById('root'))
|
||
```
|
||
|
||
## --seed-contents--
|
||
|
||
```jsx
|
||
class ControlledInput extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
input: ''
|
||
};
|
||
// Change code below this line
|
||
|
||
// Change code above this line
|
||
}
|
||
// Change code below this line
|
||
|
||
// Change code above this line
|
||
render() {
|
||
return (
|
||
<div>
|
||
{ /* Change code below this line */}
|
||
|
||
{ /* Change code above this line */}
|
||
<h4>Controlled Input:</h4>
|
||
<p>{this.state.input}</p>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```jsx
|
||
class ControlledInput extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
input: ''
|
||
};
|
||
this.handleChange = this.handleChange.bind(this);
|
||
}
|
||
handleChange(event) {
|
||
this.setState({
|
||
input: event.target.value
|
||
});
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<input
|
||
value={this.state.input}
|
||
onChange={this.handleChange} />
|
||
<h4>Controlled Input:</h4>
|
||
|
||
<p>{this.state.input}</p>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|