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

这篇文章主要给大家介绍了关于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;