【React 17.0.2】フォームとイベントハンドラの扱い

state と onChange でstateを更新する
L useStateで初期値を設定している

		function App(){
			const [name, setName] = React.useState('Jhon');

			const handleChange = e => setName(e.target.value);

			return(
				<>
					<h1>Hello, {name}</h1>
					<input value={name} onChange={handleChange} />
				</>
			);
		}

textareaもinputと同じ

<textarea value={val} onChange={handleChange} />

– radioボタンを使う場合

		function App(){
			const [val, setVal] = React.useState('cat');

			const handleChange = e => setVal(e.target.value);

			return(
				<>
					<label>
						<input
							type="radio"
							value="cat"
							onChange={handleChange}
							checked={val == 'cat'}
						/>
						猫
					</label>
					<label>
						<input
							type="radio"
							value="dog"
							onChange={handleChange}
							checked={val == 'dog'}
						/>
						犬
					</label>
					<p>Your Choice: {val}</p>
				</>
			);
		}

– checkbox
L 配列の場合はuseStateのところで[”]とする
L stateは変更できず、val.push(e.target.value)とはできない

function App(){
			const [val, setVal] = React.useState(['js']);

			const handleChange = e => {
				if(val.includes(e.target.value)){
					setVal(val.filter(item => item !== e.target.value));
				} else {
					setVal([...val, e.target.value]);
				}
			};

			return(
				<>
					<label>
						<input
							type="checkbox"
							value="js"
							onChange={handleChange}
							checked={val.includes('js')}
						/>
						JavaScript
					</label>
					<label>
						<input
							type="checkbox"
							value="python"
							onChange={handleChange}
							checked={val.includes('python')}
						/>
						Python
					</label>
					<label>
						<input
							type="checkbox"
							value="java"
							onChange={handleChange}
							checked={val.includes('java')}
						/>
						Java
					</label>
					<p>Your Choice: {val.join(', ')}</p>
				</>
			);
		}

以下のように書くこともできる

			const initialVal = {js: true, python: false, java: false};
			const [val, setVal] = React.useState(initialVal);

			const handleChange = e => {
				const newVal = Object.assign({}, val, {
					[e.target.value] : !val[e.target.value]
				});
				setVal(newVal);
			};

– select box
L onChangeとするところなどほぼ同じですね

function App(){
			const [val, setVal] = React.useState('react');

			const handleChange = e => setVal(e.target.value);

			return(
				<>
					<select value={val} onChange={handleChange}>
						<option value="react">React</option>
						<option value="vue">Vue.js</option>
						<option value="angular">Angular</option>
					</select>
					<p>Your Choice:{val}</p>
				</>
			);
		}

– コンポーネントのイベント処理

function Tab({ onChange }){
			return (
				<ul>
					<li onClick={()=> onChange(1)}>React</li>
					<li onClick={()=> onChange(2)}>Vue.js</li>
					<li onClick={()=> onChange(3)}>Angular</li>
				</ul>
			);
		}

		function App(){
			const [tab, setTab] = React.useState(1);

			const handleChange = val => setTab(value);

			return(
				<>
					<Tab onChange={handleChange} />

					<div hidden={tab !== 1}>
						A JavaScript library for building user interfaces
					</div>
					<div hidden={tab !== 2}>
						The Progressive JavaScript Framework
					</div>
					<div hidden={tab !== 3}>
						One framework. Mobile &amp; desktop.
					</div>
				</>
			);
		}

React.useState()の使い方は何となくわかってきたのう