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

方法一  利用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(
<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元素取值并提交

无状态组件写法：

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;

有状态组件写法：

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 树中的句柄，该值会作为回调函数的第一个参数返回。

除了这两种写法，还可以利用Antd的Form组件实现表单功能，传送门：React利用Antd的Form组件实现表单功能

总结

到此这篇关于React获取input值并提交的2种方法的文章就介绍到这了,更多相关React获取input值并提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

• 在react项目中使用antd的form组件,动态设置input框的值
• react获取input输入框的值的方法示例