189 8069 5689

React表单元素如何使用

这篇文章主要介绍React表单元素如何使用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司基于分布式IDC数据中心构建的平台为众多户提供川西大数据中心 四川大带宽租用 成都机柜租用 成都服务器租用。

受控元素

下面来看一下如何获取输入框的值

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.inp = this.inp.bind(this);
        this.sub = this.sub.bind(this);
        this.state = {
            place:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value     {/* 通过事件细节改变inputV的值*/}
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            

                
                

                {/*此处的main是来自父组件的传值*/}
            

        )
    }
}
export default Trem;

代码解读：
this.inp = this.inp.bind(this); 绑定inp函数this指向
this.state  初始化变量
inp()  监听input的输入值
this.state.inputV  通过赋值获取input的value

textarea 标签

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.inp = this.inp.bind(this);
        this.sub = this.sub.bind(this);
        this.state = {
            place:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value    
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (