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

2020-07-16 09:07:06 来源：易采站长站作者：

本篇文章给大家带来的内容是关于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;

代码解读:
请注意，Coconut选项最初由于selected属性是被选中的。在React中，并不使用之前的selected属性，而在根select标签上用value属性来表示选中项。这在受控组件中更为方便，因为你只需要在一个地方来更新组件。

总之，<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;

代码解读：