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

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

解决方案

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 属性中。