本篇文章给大家带来的内容是关于react表单元素的用法介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
今天来讲讲react的表单元素。
受控元素
下面来看一下如何获取输入框的值
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 (            dc6dce4a544fdca2df29d5ac0ea9906b                62e199ef0ab75a2a7be23da5fa1c717d                076402276aae5dbec7f672f8f4e5cc81                459c89d2db27bf5521f6ebf243005869{this.props.main}65281c5ac262bf6d81768915a4a77ac0{/*此处的main是来自父组件的传值*/}            16b28748ea4df4d9c2150843fecfba68        )    }}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 (            dc6dce4a544fdca2df29d5ac0ea9906b                579a56a427fedd3f43e55073182d8083                                076402276aae5dbec7f672f8f4e5cc81                459c89d2db27bf5521f6ebf243005869{this.props.main}65281c5ac262bf6d81768915a4a77ac0            16b28748ea4df4d9c2150843fecfba68        )    }}export default trem;
下拉选择框
import react, { component } from 'react';class trem extends react.component {    constructor(props){        super(props);        this.select = this.select.bind(this);        this.state = {            selectv:'coconut'        }    };        select(e){        this.setstate({            selectv:e.target.value            });        console.log(e.target.value)    };            render(){        return (            dc6dce4a544fdca2df29d5ac0ea9906b                                3b8a70dc2667e2f464d10ebbd01d4c15                    5cd170ccbf19f643965dc1b11b38534fgrapefruit4afa15d3069109ac30911f04c56f3338                    67b1a94f022b03f32c16ff26047dc8f5lime4afa15d3069109ac30911f04c56f3338                    6c713fef7b2c7826473712e34196e8b6coconut4afa15d3069109ac30911f04c56f3338                    7d46921a401f79981639c6e9dc841feamango4afa15d3069109ac30911f04c56f3338                18bb6ffaf0152bbe49cd8a3620346341                076402276aae5dbec7f672f8f4e5cc81            16b28748ea4df4d9c2150843fecfba68        )    }}export default trem;
代码解读:
请注意，coconut选项最初由于selected属性是被选中的。在react中，并不使用之前的selected属性，而在根select标签上用value属性来表示选中项。这在受控组件中更为方便，因为你只需要在一个地方来更新组件。
总之，e67338802192d7bd5294b2aa965c9bc5, 4750256ae76b6b9d804861d8f69e79d3, 和 221f08282418e2996498697df914ce4e 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制。
多个输入的解决方法
当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。
import react,{component} from 'react';class more extends react.component {    constructor(props){        super(props);        this.state = {            isgoing: true,            numberofguests: 2        };        this.handleinputchange = this.handleinputchange.bind(this);    };    handleinputchange(event) {        const target = event.target;        const value = target.type === 'checkbox' ? target.checked : target.value;        const name = target.name;        this.setstate({            [name]: value        });        console.log(event.target.checked,event.target.value)    };    render(){        return (            ff9c23ada1bcecdd1a0fb5d5a0f18437                2e1cf0710519d5598b1f0f14c36ba674                is going:                bb9a5cf863b3be50dad45a483335a732                8c1ecd4bb896b2264e0711597d40766c                ff9d32c555bb1d9133a29eb4371c1213                2e1cf0710519d5598b1f0f14c36ba674                number of guests:                0cc06ec0576f2b965bb67af4c374cf2f                8c1ecd4bb896b2264e0711597d40766c            f5a47148e367a6035fd7a2faa965022e        )    }}export default more;
代码解读：
this.setstate({});
es6计算属性名语法
源码地址：https://github.com/nick091608...
【相关推荐：react视频教程】
以上就是react表单元素的用法介绍（附代码）的详细内容。