React获取input的值并提交的两种方法
方法一 利用DOM提供的Event对象的target事件属性取值并提交
import React from 'react';class InputDemo extends React.Component{state = {InputValue : "",//输入框输入值};handleGetInputValue = (event) => {this.setState({InputValue : event.target.value,})};handlePost = () => {const {InputValue} = this.state;console.log(InputValue,'------InputValue');//在此做提交操作，比如发dispatch等};render(){return(这里的和都是用的html的标签，当然也可以使用Antd的和组件，里面的内容是不变的
首先在组件最上方state中定义了InputValue:"",下面里写了value={this.state.InputValue}，如果去掉onChange事件，那么这时候输入框里是什么都输入不了的，因为
React认为所有的状态都应该由 React 的 state 控制，只要类似于、、这样的输入控件被设置了value值，那么它们的值永远以被设置的值为准。如果值没被改变，value就不会变化
React中要用setState才能更新组件的内容，所以需要监听输入框的onChange事件，获取到输入框的内容后通过setState的方式更新state的InputValue，这样的内容才会实时更新
再说onChange的handleGetInputValue方法，利用了DOM的Event对象的target事件属性：
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口
详情可见W3C标准介绍
方法二 利用React的ref访问DOM元素取值并提交
无状态组件写法：
const InputDemo = () => {let inputValue;const handlePost = (e) => {if (e) e.preventDefault();const valueTemp = inputValue.value;console.log(valueTemp, '------valueTemp');//在此做提交操作，比如发dispatch等};return ()
};export default InputDemo;
有状态组件写法：
import React from 'react';class InputDemo extends React.Component {handlePost = (e) => {if (e) e.preventDefault();const valueTemp = this.inputValue.value;console.log(valueTemp, '------valueTemp');//在此做提交操作，比如发dispatch等};render() {return ()}
};export default InputDemo;
Ref 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性，然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回。
除了这两种写法，还可以利用Antd的Form组件实现表单功能，传送门：React利用Antd的Form组件实现表单功能
======2022.11.21更新======
方法三 利用useRef访问DOM元素取值并提交
在function组件中，还可以使用React给我们提供的Hook: useRef来获取表单数据
import React, {useRef} from 'react';const InputDemo: React.FC = () => {const myRef = useRef({} as HTMLInputElement);const handlePost = () => {const valueTemp = myRef.current.value;console.log(valueTemp, '------valueTemp');//在此做提交操作，比如发dispatch等};return ()
};export default InputDemo;
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。返回的 ref 对象在组件的整个生命周期内持续存在。
本质上还是使用ref访问Dom对象--无论该节点如何改变，React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。具体可参考官方文档：React.useRef
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！