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值并提交内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 在react项目中使用antd的form组件,动态设置input框的值

    问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if

  • react获取input输入框的值的方法示例

    react 获取input 输入框的值的多种方式 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ const inpVal = this.input.value; console.log(inpVal); } render(){ return( <div> <input

  • 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, }) }; handlePos

  • jquery 获取索引值在一定范围的列表方法

    如下所示: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> jquery选择器: eq(index) 匹配列表中的第index个元素(index

  • JavaScript禁止用户多次提交的两种方法

    [当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大.所以我们需要进行限制] [1]将提交按钮禁止 <html> <head> <script> //禁止默认行为 因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能 function preventDef(event){ event=event||window.event; if(event.preventDefault){ return even

  • ThinkPHP防止重复提交表单的方法实例分析

    本文实例总结分析了ThinkPHP防止重复提交表单的方法.分享给大家供大家参考,具体如下: 为什么会有表单重复的坑 在开发中,如果一个新增或修改的表单,在后台完成数据库操作后我们设定的不是跳转到其他页面,还是返回本页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交,即这条记录会被增加或修改两次. 导致表单重复提交的原因是:第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其他页面时才消失.在自调用返回时,内存中的数据依然在,这时页面中的判断提交的代码依然可以检

  • php解决和避免form表单重复提交的几种方法

    前言 为什么要避免form表单被重复提交呢?因为我们不想让我们的服务器重复处理没必要的数据,同时我们也是避免我们的数据库产生重复的数据,避免表单重复提交也是让我们的网站更安全的一种表现. 先看一下有哪些情况下回导致表单重复提交呢,知道哪些情况下可能会出现表单重复提交就可以从根源处理表单重复提交的情况了. 下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶

  • jQuery的 $.ajax防止重复提交的两种方法(推荐)

    下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'

  • Flask中获取小程序Request数据的两种方法

    Flask中获取小程序Request数据的两种方法 作为后端屌对于前端确实讳莫如深,JS中的类型Object竟然不能直接通过POST传入到后台Flask中,您会发现获取的是[object Object],这货在Flask中只是个Str,哈哈... 于是,开始寻求解决方案: 方案一,通过GET或者POST传参,将Object转换为Str请求数据: 1.在util.js中定义一个JS函数: function json2Form(json) { var str = []; for (var p in

  • springmvc 防止表单重复提交的两种方法

    目录 1.通过session中的token验证 步骤1:创建自定义注解 步骤2:创建自定义拦截器(@slf4j是lombok的注解) 步骤3:将自定义拦截器添加到配置文件 2.通过当前用户上一次请求的url和参数验证重复提交 步骤1:创建自定义注解 步骤2:创建自定义拦截器 步骤3:将自定义拦截器添加到配置文件 最近在本地开发测试的时候,遇到一个表单重复提交的现象. 因为网络延迟的问题,我点击了两次提交按钮,数据库里生成了两条记录.其实这种现象以前也有遇到过,一般都是提交后把按钮置灰,无法再次提

  • php获取超链接文本内容的正则表达式(五种方法)

    废话不多说了,直接跟大家分享五种方法,通过代码讲解php获取超链接文本内容的正则表达式. //方法一 preg_match_all("/<(a|a)[s]{0,1}[w=":()]*>[ ]*(check user)[ ]*</(a|a)>/i",$string,$matches); //方法二 preg_match_all("/<a[dd]*>check user</a>/i",$string,$match

随机推荐