React获取input值并提交的2种方法实例

ゞ浴缸里的玫瑰 2022-10-15 00:42 110阅读 0赞

方法一 利用DOM提供的Event对象的target事件属性取值并提交  
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  
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(  
<div>  
<input  
value=\{this.state.InputValue\}  
onChange=\{this.handleGetInputValue\}  
/>  
<button onClick=\{this.handlePost\}>提交</button>  
</div>  
)  
\}  
\}  
  
export default InputDemo;  
这里的<input />和<button />都是用的html的标签，当然也可以使用Antd的<Input />和<Button />组件，里面的内容是不变的

首先在组件最上方state中定义了InputValue:"",下面<input />里写了value=\{this.state.InputValue\}，如果去掉onChange事件，那么这时候输入框里是什么都输入不了的，因为

React认为所有的状态都应该由 React 的 state 控制，只要类似于<input />、<textarea />、<select />这样的输入控件被设置了value值，那么它们的值永远以被设置的值为准。如果值没被改变，value就不会变化

React中要用setState才能更新组件的内容，所以需要监听输入框的onChange事件，获取到输入框的内容后通过setState的方式更新state的InputValue，这样<input />的内容才会实时更新

再说onChange的handleGetInputValue方法，利用了DOM的Event对象的target事件属性：

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口

详情可见W3C标准介绍

方法二 利用React的ref访问DOM元素取值并提交  
无状态组件写法：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
const InputDemo = () => \{  
let inputValue;  
const handlePost = (e) => \{  
if (e) e.preventDefault();  
const valueTemp = inputValue.value;  
console.log(valueTemp, '------valueTemp');  
//在此做提交操作，比如发dispatch等  
\};  
  
return (  
<div>  
<form onSubmit=\{handlePost\}>  
<input  
ref=\{input => inputValue = input\}  
/>  
<button onClick=\{handlePost\}>提交</button>  
</form>  
</div>  
)  
\};  
  
export default InputDemo;  
有状态组件写法：

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  
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 (  
<div>  
<form onSubmit=\{this.handlePost\}>  
<input  
ref=\{input => this.inputValue = input\}  
/>  
<button onClick=\{this.handlePost\}>提交</button>  
</form>  
</div>  
)  
\}  
\};  
  
export default InputDemo;  
Ref 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性，然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回。