［Front］Reactソース(3)-AddListコンポーネントの実装

この投稿は、src/comonent/user/pathのAddUser Componentのリソースビューで、個人が行うtoyプロジェクトの一部です.

完全なソース

import React from 'react'

import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

import ApiService from '../../ApiService';


class AddUserComponent extends React.Component{
	constructor(props){
		super(props);
		
		this.state={
			username:'',
			password:'',
			firstName:'',
			lastName:'',
			age:'',
			salary:'',
			message:null
		}
	}
	
	onChange=(e)=>{
		this.setState({[e.target.name]:e.target.value})
	}
	
	saveUser=(e)=>{
		e.preventDefault();
		
		let user={
			username:this.state.username,
			password:this.state.password,
			firstName:this.state.firstName,
			lastName:this.state.lastName,
			age:this.state.age,
			salary:this.state.salary
		}
		
		ApiService.addUser(user)
		.then(res=>{
			this.setState({message:user.username+"님이 성공적으로 등록되었습니다."})
			
			console.log(this.state.message);
			this.props.history.push('/kwonnee/users/list');
		})
		.catch(err=>{
			console.log('saveUser() ERROR',err);
		})
	}
	
	render(){
		return(
			<div>
				<Typography variant="h4" style={style}>Add User</Typography>
				<form style={formContainer}>
					<TextField type="text" placeholder="please input your username" name="username"
							fullWidth margin="normal" value={this.state.username} onChange={this.onChange}/>
					
					<TextField type="text" placeholder="please input your password" name="password"
							fullWidth margin="normal" value={this.state.password} onChange={this.onChange}/>
					
					<TextField type="text" placeholder="please input your first name" name="firstName"
							fullWidth margin="normal" value={this.state.firstName} onChange={this.onChange}/>
					
					<TextField type="text" placeholder="please input your last name" name="lastName"
							fullWidth margin="normal" value={this.state.lastName} onChange={this.onChange}/>
					
					<TextField type="text" placeholder="please input your age" name="age"
							fullWidth margin="normal" value={this.state.age} onChange={this.onChange}/>
					
					<TextField type="text" placeholder="please input your salary" name="salary"
							fullWidth margin="normal" value={this.state.salary} onChange={this.onChange}/>
					
					<Button variant="contained" color="primary" onClick={this.saveUser}>Save</Button>
				</form>
			</div>
		);
	}
}

const formContainer={
	display:'flex',
	flexFlow:'row wrap'
}

const style={
	display:'flex',
	justifyContent:'center'
}
export default AddUserComponent;

roll

ユーザー・リストで、他のユーザーを登録しようとすると、ソースのコンポーネントが呼び出されます.

ソース分析

ソース分析は、ソースコード全体の動作基準で、上から下へ行われます.

1. constructor

最初のコンポーネントページが開くと、最初に呼び出されるコンストラクション関数セクション.

constructor(props){
	super(props);

	this.state={
		username:'',
        password:'',
		firstName:'',
		lastName:'',
		age:'',
		salary:'',
		message:null
	}
}

変数名説明ユーザー名パスワードパスワードfirstName名前lastName名前名前名前年齢給与messageAPI通信ステータスメッセージ

2. onChange

onChange=(e){
	this.setState(
		{[e.target.name]:e.target.value}
	);
}

onChange:
要素値の変化を識別し、これに基づいてカスタム関数を実行するイベント関数.

内部ロジックを表示すると、実行ステータス値変更機能が表示されます.
すなわち、タグの値が変更されると、この関数はステータス値をその値に変更する役割を実行します.

3. saveUser

saveUser=(e)=>{
	e.preventDefault();
    
	let user={
		username:this.state.username,
		password:this.state.password,
		firstName:this.state.firstName,
		lastName:this.state.lastName,
		age:this.state.age,
		salary:this.state.salary
	}

	ApiService.addUser(user)
	.then(res=>{
		this.setState({message:user.username+'님이 성공적으로 등록되었습니다.'})
		this.props.history.push('/');
	})
	.catch(err=>{
		console.log('saveUser ERROR',err);
	})
}

この関数は、作成した情報に対して「保存」ボタンを押したときに呼び出される関数です.
1.前述のonChangeで格納された状態値をuserという領域変数に保存する
2.Apiserviceによりバックアップ側に情報を転送し、データ挿入操作を行う
3.処理が完了したら、ルートページ("/")にページを移動します.

4. render

render(){
	return(
		<div>
			<Typography variant="h4" style={style}>Add User</Typography>
			<form style={formContainer}>
				<TextField type="text" placeholder="please input your username" name="username"
						fullWidth margin="normal" value={this.state.username} onChange={this.onChange}/>
					
				<TextField type="text" placeholder="please input your password" name="password"
						fullWidth margin="normal" value={this.state.password} onChange={this.onChange}/>
					
				<TextField type="text" placeholder="please input your first name" name="firstName"
						fullWidth margin="normal" value={this.state.firstName} onChange={this.onChange}/>
					
				<TextField type="text" placeholder="please input your last name" name="lastName"
						fullWidth margin="normal" value={this.state.lastName} onChange={this.onChange}/>
					
				<TextField type="text" placeholder="please input your age" name="age"
						fullWidth margin="normal" value={this.state.age} onChange={this.onChange}/>
					
				<TextField type="text" placeholder="please input your salary" name="salary"
						fullWidth margin="normal" value={this.state.salary} onChange={this.onChange}/>
					
				<Button variant="contained" color="primary" onClick={this.saveUser}>Save</Button>
			</form>
		</div>
	);
}

上記のJSXも同様にRealt UIライブラリMaterial UIを使用しています.
レンダリングされた画面は次のとおりです.