react获取input的value值

简介: react获取input的value值

可以通过 event.target.value 来获取输入框的值。具体操作可以参考以下示例代码:

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }
  handleInputChange = (event) => {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.inputValue} onChange={this.handleInputChange} />
        <p>{this.state.inputValue}</p>
      </div>
    );
  }
}
export default App;

以上代码通过 value 将输入框绑定到 inputValue 值,onChange 监听输入框变化,然后将输入框的值更新到 inputValue,最后显示出 inputValue 的值。

相关文章
|
4天前
|
前端开发 JavaScript Linux
[React] 实现点击Button将文件名赋值Input
[React] 实现点击Button将文件名赋值Input
|
6月前
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
120 0
|
6月前
|
前端开发
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
55 0
|
6月前
|
前端开发
react获取input值
react获取input值
|
9月前
|
前端开发
【React工作记录八十六】React+Hook+ts+antDesignMobile实现input自动获取功能
【React工作记录八十六】React+Hook+ts+antDesignMobile实现input自动获取功能
55 0
|
11月前
|
前端开发
【React工作记录七十七】React+hook+ts+ant design封装一个input和select搜索的组件
React+hook+ts+ant design封装一个input和select搜索的组件
137 0
|
11月前
|
前端开发
React+Hook+ts+antDesignMobile实现input自动获取功能
React+Hook+ts+antDesignMobile实现input自动获取功能
90 0
|
前端开发
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
59 0
react+hook+ts项目总结-ant design input prefix
react+hook+ts项目总结-ant design input prefix
86 0
react+hook+ts项目总结-ant design input prefix
|
前端开发
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
58 0
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值