码迷,mamicode.com
首页 > 其他好文 > 详细

react 获取input标签的输入值

时间:2019-03-14 18:13:15      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:default   upper   type   uppercase   BMI   handles   beijing   hang   cas   

参考: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 获取input标签的输入值

标签:default   upper   type   uppercase   BMI   handles   beijing   hang   cas   

原文地址:https://www.cnblogs.com/zealousness/p/10531868.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!