react使用antd中input获取value值获取不到

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react使用antd中input获取value值获取不到相关的知识,希望对你有一定的参考价值。

参考技术A 不管用onChange还是ref都获取不到value值,还有一个警告

要加上一个e.persiste()百度有相关解释

react 获取input标签的输入值

参考:https://segmentfault.com/a/1190000012404114

 

两种方法,受控组件和非受控组件。

推荐使用受控组件,即通过this.state获取,因为其符合react规范;

受控组件示例,将文本框中字母转为大写

<input
    type="text"
    value={this.state.value}
    onChange={(e) => {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>

 

也可以使用非受控组件,即给标签指定ref属性:

import React, { Component } from ‘react‘;

class UnControlled extends Component {
    handleSubmit = (e) => {
        console.log(e);
        e.preventDefault();
        console.log(this.name.value);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" ref={i => this.name = i} defaultValue="BeiJing" />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

export default UnControlled;

 

以上是关于react使用antd中input获取value值获取不到的主要内容,如果未能解决你的问题,请参考以下文章

Antd 中 Input 组件默认值的显示

react 获取input标签的输入值

react+antd Failed prop type: Invalid prop `value` supplied to `Select`.

antd 使用总结问题

【React】antd的form表单的自定义校验规则的用法

踩坑React antd 动态表单获取和设置值