React表单元素的用法介绍（附代码）

互联网 19-4-4

本篇文章给大家带来的内容是关于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 (             <div>                 <input type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>                 <br/>                 <button onClick={this.sub}>{this.props.main}</button>{/*此处的main是来自父组件的传值*/}             </div>         )     } } 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 (             <div>                 <textarea type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>                                 <br/>                 <button onClick={this.sub}>{this.props.main}</button>             </div>         )     } }  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 (             <div>                                 <select value={this.state.selectV} onChange={this.select}>                     <option value="grapefruit">Grapefruit</option>                     <option value="lime">Lime</option>                     <option value="coconut">Coconut</option>                     <option value="mango">Mango</option>                 </select>                 <br/>             </div>         )     } }  export default Trem;

总之，<input type="text">, <textarea>, 和 <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 (             <form>                 <label>                 Is going:                 <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />                 </label>                 <br />                 <label>                 Number of guests:                 <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} />                 </label>             </form>         )     } } export default More;