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

 更新时间:2021年04月14日 10:55:24   作者:GuanJdoJ  
这篇文章主要给大家介绍了关于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实现换肤功能的示例代码

    react实现换肤功能的示例代码

    这篇文章主要介绍了react实现换肤功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 深入探讨前端框架react

    深入探讨前端框架react

    本文带领大家一起探讨前端框架react,涉及到前端框架react相关知识,对前端框架react相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • Vite搭建React项目的方法步骤

    Vite搭建React项目的方法步骤

    这篇文章主要介绍了Vite搭建React项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React性能优化系列之减少props改变的实现方法

    React性能优化系列之减少props改变的实现方法

    这篇文章主要介绍了React性能优化系列之减少props改变的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 使用react context 实现vue插槽slot功能

    使用react context 实现vue插槽slot功能

    这篇文章主要介绍了使用react context 实现vue插槽slot功能,文中给大家介绍了vue的slot的实现方法,需要的朋友可以参考下
    2019-07-07
  • 浅谈使用React.setState需要注意的三点

    浅谈使用React.setState需要注意的三点

    本篇文章主要介绍了浅谈使用React.setState需要注意的三点,提出了三点对 React 新手来说是很容易忽略的地方,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • react redux入门示例

    react redux入门示例

    本篇文章主要介绍了react redux入门示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 使用react实现手机号的数据同步显示功能的示例代码

    使用react实现手机号的数据同步显示功能的示例代码

    本篇文章主要介绍了使用react实现手机号的数据同步显示功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 从零开始搭建一个react项目开发

    从零开始搭建一个react项目开发

    这篇文章主要介绍了从零开始搭建一个react项目开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • react使用CSS实现react动画功能示例

    react使用CSS实现react动画功能示例

    这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下
    2020-05-05

最新评论