react nativeでフォーム的に入力するサンプル

react nativeでhtmlのフォーム様な入力をするサンプル。
関数コンポーネント版。

import React, {useState} from 'react';

import {
	Text,
	View,
	TextInput,
} from 'react-native';


const TestComponent = () => {
	const [name, setName] = useState('');
	const [kosu, setKosu] = useState('');

	// それぞれのstateを変える関数
	const changeState = {
		name: e => {
			setName(e);
		},
		kosu: e => {
			setKosu(e);
		}
	};

	return (
		<View>
			<Text>商品名</Text>
			<TextInput
				value={name}
				placeholder="商品名"
				autoCapitalize="none"
				onChangeText={changeState.name}
			/>
			<Text>個数</Text>
			<TextInput
				value={kosu}
				placeholder="個数"
				autoCapitalize="none"
				onChangeText={changeState.kosu}
			/>
        	</View>
        );

}

export default TestComponent;

コンポーネントに内容を変える関数を書くべきではない?
だって分かりやすいんですもの…

投稿日:
カテゴリー: 未分類

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です