151 lines
5.4 KiB
Markdown
151 lines
5.4 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036178
|
|
title: 制御された入力を作成する
|
|
challengeType: 6
|
|
forumTopicId: 301385
|
|
dashedName: create-a-controlled-input
|
|
---
|
|
|
|
# --description--
|
|
|
|
アプリケーションによっては、レンダーされた UI と `state` との間でもっと複雑なやり取りをする場合があります。 たとえば、`input` や `textarea` などのテキスト入力のフォームコントロール要素は、DOM 内ではユーザータイプとして独自の状態を維持します。 React では、こうしたミュータブルな状態の扱いを React コンポーネントの `state` に移すことができます。 ユーザーの入力はアプリケーションの `state` の一部となり、その入力フィールドの値は React によって制御されます。 通常は、ユーザー入力が可能な入力フィールドを持つ React コンポーネントがある場合、それは制御された入力フォームになります。
|
|
|
|
# --instructions--
|
|
|
|
コードエディターに、制御された `input` 要素を作成するための `ControlledInput` というコンポーネントのスケルトンがあります。 コンポーネントの `state` は、空文字列を保持する `input` プロパティですでに初期化されています。 この値は、ユーザーが `input` フィールドに入力するテキストを表します。
|
|
|
|
まず、`event` というパラメーターを持つ `handleChange()` というメソッドを作成してください。 このメソッドが呼び出されると、`input` 要素からのテキスト文字列を含む `event` オブジェクトを受け取ります。 この文字列にはメソッドの中で `event.target.value` を使用してアクセスできます。 コンポーネントの `state` の `input` プロパティを、この新しい文字列に更新してください。
|
|
|
|
`render` メソッドで、`h4` タグの上に `input` 要素を作成してください。 コンポーネントの `state` の `input` プロパティと等しい `value` 属性を追加してください。 そして、`onChange()` イベントハンドラーを追加して `handleChange()` メソッドに設定してください。
|
|
|
|
入力ボックスに入力すると、そのテキストは、ローカルの `state` の `input` プロパティとして設定された `handleChange()` メソッドによって処理され、ページ上の `input` ボックスの値としてレンダーされます。 コンポーネントの `state` は、入力データに関して単一の信頼できる情報源になります。
|
|
|
|
最後に、必要なバインディングを忘れずにコンストラクターに追加してください。
|
|
|
|
# --hints--
|
|
|
|
`ControlledInput` から、`input` と `p` タグを含む `div` 要素を返します。
|
|
|
|
```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
|
|
);
|
|
```
|
|
|
|
`input` プロパティを空文字列に設定して `ControlledInput` の state を初期化します。
|
|
|
|
```js
|
|
assert.strictEqual(
|
|
Enzyme.mount(React.createElement(ControlledInput)).state('input'),
|
|
''
|
|
);
|
|
```
|
|
|
|
input 要素への入力で、state と input の value を更新し、`p` 要素でこの state を入力されたとおりにレンダーします。
|
|
|
|
```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>
|
|
);
|
|
}
|
|
};
|
|
```
|