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

2024-07-29 03:55:14

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 type="text" ref={input => this.input = input} defaultValue="Hello"/>
  <button onClick={this.search.bind(this)}></button>
  </div>
 )
 }
}

使用defaultValue表示组件的默认状态，此时它只会被渲染一次，后续的渲染不起作用；input的值不随外部的改变而改变，由自己状态改变。

受控组件 this.setState({})

import React , {Component} from 'react';
export default class App extends Component{
 constructor(props){
 super(props);
 this.state = {
  inpValu:''
 }
 }

 handelChange(e){
 this.setState({
  inpValu:e.target.value
 })
 }

 render(){
 return(
  <div>
  <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/>
  </div>
 )
 }
}

input 输入框的值会随着用户输入的改变而改变，onChange通过对象e拿到改变之后的状态并更新state，setState根据新的状态触发视图渲染，完成更新。

到此这篇关于react获取input输入框的值的方法示例的文章就介绍到这了,更多相关react获取input输入框的值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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

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

如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME"> 一.jquery获取input文本框中的值通过 name var name = $('input[name="CN_NAME&
React中父组件如何获取子组件的值或方法

目录父组件获取子组件的值或方法方法一方法二方法三 React函数式组件传值之子传父具体案例效果展示父组件获取子组件的值或方法先来说下从哪获取的启发,想要从父组件获取子组件的值或方法... 一次写代码的时候,用 Antd 中的 Modal 包裹了一个子组件,子组件中包含 input 输入框,想要在点击对话框上面确定按钮时(即Modal 自带的 onOk方法),拿到其中输入的值下面用一个父组件(Father.js)和子组件(Hearder.js)来演示如何能拿到值和方法: 方法一
PHP获取input输入框中的值去数据库比较显示出来

前端:  <input type="text" name="bianhao" value="" maxlength="10" size="10" style="width:100px; margin:0px 0px 0px 25px;height:20px;"/> <input type="submit" value
JS获得多个同name 的input输入框的值的实现方法

先看下基于JS代码实现input密码输入框输入密码变黑点密文.具体代码如下所示: html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden&qu
JS获取input[file]的值并显示在页面的实现方法

实例如下所示: $(document).on('change', '.photo-box .file', function () { //alert($(this).val()); function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL !=
js与jquery获取input输入框中的值实例讲解

如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="text" name"username" id="user" placeholder="用户名" class="uusr"><br> 一.jquery获取input文本框中的值通过 name: $('inp
JS与jQuery实现子窗口获取父窗口元素值的方法

本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="
一览画面点击复选框后获取多个id值的方法

在web开发中经常会遇到一览画面中每一条记录前都带一个复选框,点击后选中该条记录进行删除.修改.查看等操作. 修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,再显示到画面上. 我说的重点是选中多条记录后进行批量删除,如何获取多条记录的id值是问题的关键.首先是在jsp页面中全选中复选框的方法. 代码如下: function checkEvent(name, allCheckId) { var allCk = document.getElementById(all

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

非受控组件获取 ref

受控组件 this.setState({})

相关推荐

随机推荐