React获取form表单值的N种方式

Ref模式（非受控模式）

非钩子模式

1.createRef()方式
js:
userNameEl=createRef()
<input type="text" name="userName" ref={this.userNameEl} />
获取值的方式：
this.userNameEl.current.value2.refs(废弃)
js:
const { userName } = this.refs;<input type="text" name="userName" ref="userName" />3.回调函数方式(不推荐)
js:
this.userNameRef.value
<input type="text" name="userName" ref={(el) => (this.userNameRef = el)} />

钩子函数模式

import React, { useRef, useEffect } from 'react';
function MyComponent() {const myRef = useRef();useEffect(() => {myRef.current.focus();}, []);return <input ref={myRef} />;
}

非ref模式(受控模式)

非钩子模式

import { Component } from "react";
export default class TestValue extends Component {state = {userName: null,};inputChange = (e) => {this.setState({ userName: e.target.value });};getInputValue = () => {console.log(this.state.userName);};render() {return (<div><input type="text" name="userName" onChange={this.inputChange} /><button onClick={this.getInputValue}>TestValue</button></div>);}
}

钩子模式

import { useState } from "react";
export default function TestValue() {//函数式组件使用const [userName, setUserName] = useState(null);function inputChange(e) {setUserName(e.target.value);}function getInputValue() {console.log(userName);}return (<div><input type="text" name="userName" onChange={inputChange} /><button onClick={getInputValue}>TestValue</button></div>);
}

总结

ref模式和非ref模式的区别

ref模式是在类组件或使用Hooks的函数组件中创建并使用ref的方式，可以用来访问和控制DOM节点或其他组件实例。非ref模式主要是指无状态组件，它们不支持ref。

受控组件和非受控组件的区别

React受控组件和非受控组件之间的最大区别是组件的值是由React状态控制还是由DOM节点控制。