这篇文章主要介绍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 () } } export default Trem;
{/*此处的main是来自父组件的传值*/}
代码解读:
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 () } } 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 () } } export default Trem;
代码解读:
请注意,Coconut选项最初由于selected属性是被选中的。在React中,并不使用之前的selected属性,而在根select标签上用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 () } } export default More;
代码解读:
this.setState({ });
es6计算属性名语法
以上是React表单元素如何使用的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!