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

今天来讲讲react的表单元素。

受控元素

下面来看一下如何获取输入框的值

import React, { Component } from &＃39;react&＃39;;

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:&＃39;&＃39;
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value     {/* 通过事件细节改变inputV的值*/}
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            

                
                

                {this.props.main}{/*此处的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 &＃39;react&＃39;;

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:&＃39;&＃39;
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value    
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            

                                
                <br/>
                <button OnClick={this.sub}>{this.props.main}</button>
            </div>
        )
    }
}

export default Trem;</pre><p><strong>下拉选择框</strong></p><pre class="brush:php;toolbar:false">import React, { Component } from &＃39;react&＃39;;

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.select = this.select.bind(this);
        this.state = {
            selectV:&＃39;coconut&＃39;
        }
    };    
    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;</pre><p>代码解读:<br/>请注意，Coconut选项最初由于selected属性是被选中的。在React中，并不使用之前的selected属性，而在根select标签上用value属性来表示选中项。这在受控组件中更为方便，因为你只需要在一个地方来更新组件。</p><p><strong><em>总之，<input type="text">, <textarea>, 和 <select> 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制。</em></strong></p><p><strong>多个输入的解决方法</strong><br/>当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。</p><pre class="brush:php;toolbar:false">import React,{Component} from &＃39;react&＃39;;

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 === &＃39;checkbox&＃39; ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
        console.log(event.target.checked,event.target.value)
    };
    render(){
        return (
            
                <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>
            
        )
    }
}
export default More;</pre><p>代码解读：<br/></p><pre class="brush:js;toolbar:false">this.setState({
});</pre><p>es6计算属性名语法</p><p>源码地址：https://github.com/Nick091608...</p><p>【        <br>
        <script type="text/javascript">
            var cpro_id = "u6885494";

        </script>
        <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script>
    </div>


    <div class="blog_tags">
        <ul>
                        <li><a href="https://www.php1.cn/tag/go" target="_blank" title="go">go</a></li>
                        <li><a href="https://www.php1.cn/tag/https" target="_blank" title="https">https</a></li>
                        <li><a href="https://www.php1.cn/tag/git" target="_blank" title="git">git</a></li>
                    </ul>
    </div>



    <div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">写下你的评论吧 !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了
            
            

                

                                        会员登录 | 用户注册