本篇文章给大家带来的内容是关于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 (
{/*此处的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 (
多个输入的解决方法
当你有处理多个受控的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 (
)
}
}
export default More;代码解读：
this.setState({
});es6计算属性名语法
源码地址：https://github.com/Nick091608...
【相关推荐：react视频教程】
相关文章
javascript中的条件语句如何工作_怎样使用if-else进行逻辑判断【教程】
javascript的web storageapi有何限制_如何处理存储空间和安全性问题【教程】
什么是JavaScript中的国际化与本地化_使用Intl对象处理多语言支持【教程】
什么是Canvas_如何使用javascript在画布上绘制图形和动画【教程】
如何在 JavaScript 前端正确拼接二进制文件与元数据并发送至后端
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
