【React】入力フォーム

概要

1.入力された値をstateで管理

2.入力された値はonChangeでinputに入力された時にテキストを更新

3.inputのvalueはstateで保持している値を割り当てる

導入

1.フォームを作成

2.stateを作成

3.stateの値をフォームのvalueに割り当てて表示を確認

4.onChangeイベントを作成

5.stateが更新されるか確認

input要素を参照

event.target.value

コード全文

​const { Component } = React;

function NameForm(){
	// inputに入力されたテキストのstate
	const [inputText, setText] = React.useState("");
	
	const changeText = (event) => {
		setText(event.target.value);
	}
	
	return (
		<form>
			<input type="text" value={inputText} onChange={changeText} />
			<input type="submit" />
			<h1>入力された値：{inputText}</h1>
		</form>
	);
}

function App(){
	return (
		<div>
			<NameForm/>
		</div>
	);
}

ReactDOM.render(<App />, document.querySelector(".container"));