ract——关于表单的一些方法

ract——关于表单的一些方法

受限组件、非受限组件

	class Boxx extends React.Component {
				state = {
					form: {
						name: 'my name is tom',
						age: 'age :18',
						sex: 1,
					},
				}
				//双向数据
				change = (e) => {
					this.setState({
						form: {
							name: e.target.value,
						},
					})
				}
				// 两个input  只有添加了onchange事件手动更新数据以后才会更新值 否则怎么输入都不会变化
				render() {
					return (
						<div>
							受限制 不能输入新的值 配合onchange
							<input type='text' value={this.state.form.age} />
							不受限制  用户能自由的输入
							<input type='text' />
							<input type='text' defaultValue={this.state.sex} />
							<hr />
							一些表单的控件的默认值处理
							<div>
								<label>
									单选 默认值 default+Checked
									<input type='radio' name='rad' defaultChecked /> 男
									<input type='radio' name='rad' /> 女
								</label>
							</div>
							<div>
								<label>
									多选 默认值 default+Checked
									<input type='checkbox' defaultChecked /> 女
									<input type='checkbox' /> 女
									<input type='checkbox' /> 女
									<input type='checkbox' defaultChecked /> 女
								</label>
							</div>
							<div>
								<label>
									下拉 默认值 default+select
									<select defaultValue='a'>
										<option value=''></option>
										<option value='b'>b</option>
										<option value='a'>a</option>
										<option value='c'>c</option>
										<option value='d'>d</option>
									</select>
								</label>
							</div>
							<div>
								<label>
									下拉多选 默认值 default+value 
									<select defaultValue={['a', 'b']} multiple={true}>
										<option value=''></option>
										<option value='b'>b</option>
										<option value='a'>a</option>
										<option value='c'>c</option>
										<option value='d'>d</option>
									</select>
								</label>
							</div>
						</div>
					)
				}

关于react中的dom元素循环 依旧是放在jsx中

<input type='text' class='form-control' value={name} />
								<label>
									react中的 循环遍历
									<select defaultValue={select} multiple={true}>
										{arr1.map((item, index) => {
											<option key={index} value={item}>
												{item}
											</option>
										})}
									</select>
								</label>

简单表单组件循环

	class Hello extends React.component {
				state = {
					name: 'xiaoming',
					age: 19,
					address: '上海',
					select: [],
				}
				render() {
					// 结构取值
					let { name, age, address, select } = this.state
					let arr1 = ['d', 'n', 'f']
					return (
						<div>
							<div class='form-group'>
								<input type='text' class='form-control' value={name} />
								<label>
									react中的 循环遍历
									<select defaultValue={select} multiple={true}>
										{arr1.map((item, index) => {
											;<option key={index} value={item}>
												{item}
											</option>
										})}
									</select>
								</label>
							</div>
						</div>
					)
				}
			}

表单组件响应式、简单封装change

	handleChange = (e) => {
					// 获取属性值
					let { val, name } = e.target
					// 创建规则
					let rule = new RegExp(e.target.getAttribute('rule'))
					let errorText = ''
					// 判断
					if (!val) {
						// 必填
						errorText = e.target.getAttribute('require')
					} else if (!rule.test(val)) {
						// 校验
						errorText = msg
					} else {
						// 通过
						errorText = ''
					}
					// 赋值
					this.setState({
						[name]: val,
						[name + 'Error']: errorText,
					})
				}
				
				
				

render

	render() {
					let { name, age, phone, nameError, passwordError, phoneError, address, select, password } = this.state
					return (
						<div>
							<div>
								<label>
									姓名:
									<input
										type='text'
										name='name'
										value={name}
										require='用户名不能为空'
										rule='^[a-zA-Z0-9]{4,10}$'
										msg='请输入4-请输入4-10位的用户名称'
										onChange={this.handleChange}
									/>
									<span className='danger'>{nameError}</span>
								</label>
							</div>
							<div>
								<label>
									密码:
									<input
										type='password'
										require='密码不能为空'
										msg='请输入6-10位的密码'
										rule='\S*(?=\S{6,10})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$'
										name='password'
										value={password}
										onChange={this.handleChange}
									/>
									<span className='danger'>{passwordError}</span>
								</label>
							</div>
							<div>
								<label>
									<input
										type='phone'
										value={phone}
										name='phone'
										require='手机号不能为空'
										msg='请输入合法的手机号'
										rule='^(?:(?:\+|00)86)?1[3-9]\d{9}$'
										onChange={this.handleChange}
									/>
									<span className='danger'>{phoneError}</span>
								</label>
							</div>
							<div>
								<label>
									地址:
									<textarea rows='10' cols='10' name='address' value={address} onChange={this.handleChange}></textarea>
								</label>
							</div>
							<div>
								<button onClick={this.handleSubmit}> 提交</button>
							</div>
						</div>
					)
				}