React 基础巩固(二十四)——React 受控组件 & 非受控组件

React 受控组件 & 非受控组件 的简单案例

• React 推荐大多数情况下使用受控组件来处理表单数据
  • 在受控组件中，表单数据是由 React 组件来管理的
  • 另一种方式是使用非受控组件，表单数据将交由 DOM 节点来处理
• 如果使用非受控组件中的数据，需要使用 ref 从 DOM 节点中获取表单数据
• 在非受控组件中通常使用 defaultValue 来设置默认值

import React, { PureComponent, createRef } from "react";export class app extends PureComponent {constructor() {super();this.state = {username: "",password: "",isAgree: false,hobbies: [{ value: "sing", text: "唱", isChecked: false },{ value: "dance", text: "跳", isChecked: false },{ value: "rap", text: "Rap", isChecked: false },],answer: ["A"],intro: "outman",};this.introRef = createRef();}componentDidMount() {// this.introRef.current.addEventListener}handleSubmitClick(event) {// 1.阻止默认行为event.preventDefault();// 2.获取到所有的表单数据,对数据进行组建console.log(this.state.username);console.log(this.state.password);console.log(this.state.hobbies.filter((item) => item.isChecked).map((item) => item.value));console.log(this.state.answer);console.log(this.introRef.current.value);// 3.以网络请求的方式将数据传递给服务器(ajax/fetch/axios)}handleUserDataChange(event) {const keyName = event.target.name;this.setState({[keyName]: event.target.value,});}handleAgreeChange(event) {this.setState({isAgree: event.target.checked,});}handleHobbiesChange(event, index) {const hobbies = [...this.state.hobbies];hobbies[index].isChecked = event.target.checked;this.setState({hobbies,});}handleAnswerChange(event) {const options = Array.from(event.target.selectedOptions);const values = options.map((item) => item.value);this.setState({answer: values,});}render() {const { username, password, isAgree, hobbies, answer, intro } = this.state;return (<div><form onSubmit={(e) => this.handleSubmitClick(e)}>{/* 1.用户名和密码 */}<div><label htmlFor="username">用户：<inputid="username"type="text"name="username"value={username}onChange={(e) => this.handleUserDataChange(e)}/></label><label htmlFor="password">密码：<inputid="password"type="password"name="password"value={password}onChange={(e) => this.handleUserDataChange(e)}/></label></div>{/* 2.checkbox */}<label htmlFor="agree"><inputid="agree"type="checkbox"checked={isAgree}onChange={(e) => this.handleAgreeChange(e)}/>同意协议</label>{/* 3.checkbox多选 */}<div>您的爱好：{hobbies.map((item, index) => {return (<label htmlFor={item.vlaue} key={item.value}><inputtype="checkbox"id={item.vlaue}checked={item.isChecked}onChange={(e) => this.handleHobbiesChange(e, index)}/>{item.text}</label>);})}</div>{/* 4.select */}<selectvalue={answer}multipleonChange={(e) => this.handleAnswerChange(e)}><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select>{/* 5.非受控组件 */}<input type="text" defaultValue={intro} ref={this.introRef} /><div><button type="submit">注册</button></div></form></div>);}
}export default app;