react基础 react表单组件

发表于 分类于 ， ， 阅读次数： Changyan： 本文字数： 3k 阅读时长 ≈ 3 分钟
react基础 react表单组件

表单

受控组件：组件的使用者，有能力完全控制该组件的行为和内容。通常情况下，没有自己的状态，其内容完全受到属性的控制。

非受控组件：组件的使用者，没有能力控制组件的行为和内容，组件的内容和行为完全自行控制。

表单组件默认情况下是非受控组件，一旦设置了表单组件的 value 属性，则其变成受控组件（单选框和多选框需要设置 checked）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import React, { Component } from "react";

export default class FormTest extends Component {
	state = {
		loginId: "",
		loginPwd: "",
		sex: "male",
		place: "hunan",
		loveOptions: [
			{
				text: "足球",
				value: "足球",
			},
			{
				text: "篮球",
				value: "篮球",
			},
			{
				text: "唱歌",
				value: "唱歌",
			},
			{
				text: "睡觉",
				value: "睡觉",
			},
			{
				text: "其他",
				value: "其他",
			},
		],
		loves: ["足球"],
	};
	// 处理数据变化
	onHandleChange = (e) => {
		let val = e.target.value;
		let name = e.target.name;
		if (e.target.type === "checkbox") {
			if (e.target.checked) {
				val = [...this.state.loves, val];
			} else {
				val = this.state.loves.filter((item) => item !== val);
			}
		}
		this.setState({
			[name]: val,
		});
	};
	/**
	 * 获取所有的爱好
	 */
	getAllLoves() {
		return this.state.loveOptions.map((item) => (
			<label key={item.value}>
				<input
					type="checkbox"
					name="loves"
					value={item.value}
					checked={this.state.loves.includes(item.value)}
					onChange={this.onHandleChange}
				/>
				{item.text}
			</label>
		));
	}
	render() {
		const bs = this.getAllLoves();
		return (
			<div>
				<p>
					<label>
						用户名：
						<input
							type="text"
							name="loginId"
							value={this.state.loginId}
							onChange={this.onHandleChange}
						/>
					</label>
				</p>
				<p>
					<label>
						密码：
						<input
							type="password"
							name="loginPwd"
							value={this.state.loginPwd}
							onChange={this.onHandleChange}
						/>
					</label>
				</p>
				<p>
					<label>
						<input
							type="radio"
							name="sex"
							value="male"
							checked={this.state.sex === "male"}
							onChange={this.onHandleChange}
						/>
						男
					</label>
					<label>
						<input
							type="radio"
							name="sex"
							value="female"
							checked={this.state.sex === "female"}
							onChange={this.onHandleChange}
						/>
						女
					</label>
				</p>
				<p>
					<select
						name="place"
						value={this.state.place}
						onChange={this.onHandleChange}
					>
						<option value="henan">河南</option>
						<option value="hunan">湖南</option>
						<option value="hubei">湖北</option>
					</select>
				</p>
				<p>{bs}</p>
				<p>
					<button
						onClick={() => {
							console.log(this.state);
						}}
					>
						获取数据
					</button>
				</p>
			</div>
		);
	}
}