React antd 获取 input 文本输入框的值

原创 HuangLongPu     发表于  2021-03-30 13:56       122

解决方案

React antd 获取 input 文本输入框值的正确姿势：

this.inputName.state.value

步骤分解

引用 antd 的文本输入框和按钮：

<Input ref={name => this.name = name} placeholder="输入名称" />
<Button type="primary" onClick={this.getInputValue}>点击获取输入框的值</Button>

获取文本输入框值的函数代码：

getInputValue = () => {
　　　　const name = this.name;
       // 打印输出整个 Input 对象
       console.info(name);
       // 按照标准写法取值
       console.info(name.value);
       // 从状态中取值
       console.info(name.state.value);
}

结果会出乎你的意料，标准写法不能获取到文本输入框的值（”undefined“），antd 将在放在了 state 属性中。




npm太慢？使用cnpm来安装 React 脚手架

React开发需要基于NodeJS的环境，建议尽量选择高一点的版本，不然建项目时会提示版本过低。安装完成后，默认会自动配置环境变量，使用 node -v 命令即可查看 NodeJS 版本信息，Windows 和 MacOS上命令一致； 环境安装完成，接下来通过脚手架的方式生成 React 项目，由于国内使用 nmp 方式速度太慢，建议使用淘宝镜像的 cnpm 形式（如果有特殊渠道，可以忽略）。接下

fengGo    2020-11-27 09:05    403
WebStorm React 开发提示 Default export is not declared in imported module

React 项目构建失败，组件类名有警告，代码如下图：构建失败信息为：而且第三方代码有警告，鼠标放上去，提示信息为：Login 组件类代码如下：怎么解决呢？

fengGo    2021-03-11 01:28    179
React 引入 antd 设置组件显示中文

本文章推荐全局设置，体现为在入口 App 组件中配置，参考代码如下：

HuangLongPu    2021-04-20 00:30    99