zoukankan      html  css  js  c++  java
  • 第一个实例-输入框输入,动态增加,删除

    1.新建一个组件Xiao.js

    import React, {Component} from "react";
    
    class Xiao extends Component {
        render() {
            return (
                <div>
                    <div><input /> <button>增加</button></div>
                    <ul>
                        <li>头部</li>
                        <li>部</li>
                    </ul>
                </div>
    
            );
        }
    }
    
    //组件暴露,让外界引用
    export default Xiao
    

      

     注意:

     用Fragment

    2.数据绑定,输入框动态输入的实现

     这时候界面:

    但是在输入框中无论怎么输入,都没有反应。这时候就需要事件绑定

     

    import React, {Component, Fragment} from "react";
    
    class Xiao extends Component {
        //构造函数,所有数据写在state中,初始化,固定写法
        constructor(props) {
            super(props);
            this.state = {
                inputValue:'jsPang',
                list:[]
            }
        }
    
        render() {
            return (
                <Fragment>
                    <div>
                        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
                        <button>增加</button>
                    </div>
                    <ul>
                        <li>头部</li>
                        <li>部</li>
                    </ul>
                </Fragment>
    
            );
        }
    
        inputChange(e){
            //console.log(e.target.value)
            //this.state.inputValue = e.target.value
            this.setState({
                inputValue: e.target.value
            })
        }
    }
    
    //组件暴露,让外界引用
    export default Xiao
    

    3.增加按钮动态增加

     

    import React, {Component, Fragment} from "react";
    
    class Xiao extends Component {
        //构造函数,所有数据写在state中,初始化,固定写法
        constructor(props) {
            super(props);
            this.state = {
                inputValue:'jsPang',
                list:['基础', '升级1']
            }
        }
    
        render() {
            return (
                <Fragment>
                    <div>
                        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
                        <button onClick={this.addList.bind(this)}>增加</button>
                    </div>
                    <ul>
                        {this.state.list.map((item,index)=>{
                            return <li key={index+item}>{item}</li>
                        })}
                    </ul>
                </Fragment>
    
            );
        }
        inputChange(e){
            this.setState({
                inputValue: e.target.value
            })
        }
        //增加列表
        addList(e){
            this.setState({
                // ...表示扩展运算符,相当于list:['基础', '升级1', this.state.inputValue]
                list:[...this.state.list, this.state.inputValue]
            })
        }
    }
    //组件暴露,让外界引用
    export default Xiao
    

      

     4.新增之后,将输入框清空

     

    5.删除功能实现

     

     这样点击每一行就可以执行删除操作

    import React, {Component, Fragment} from "react";
    
    class Xiao extends Component {
        //构造函数,所有数据写在state中,初始化,固定写法
        constructor(props) {
            super(props);
            this.state = {
                inputValue:'jsPang',
                list:['基础', '升级1']
            }
        }
    
        render() {
            return (
                <Fragment>
                    <div>
                        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
                        <button onClick={this.addList.bind(this)}>增加</button>
                    </div>
                    <ul>
                        {this.state.list.map((item,index)=>{
                            return (
                                <li key={index+item}
                                    onClick={this.deleteItem.bind(this, index)}
                                >
                                    {item}
                                </li>
                            )
                        })}
                    </ul>
                </Fragment>
    
            );
        }
        inputChange(e){
            this.setState({
                inputValue: e.target.value
            })
        }
        //增加列表
        addList(e){
            this.setState({
                // ...表示扩展运算符,相当于list:['基础', '升级1', this.state.inputValue]
                list:[...this.state.list, this.state.inputValue],
                inputValue:''
            })
        }
        // 删除列表项目
        deleteItem(index){
            console.log(index)
            // 声明局部list
            let list = this.state.list
            list.splice(index, 1)
            this.setState({
                list:list
            })
        }
    }
    //组件暴露,让外界引用
    export default Xiao
    

      

  • 相关阅读:
    Can you answer these queries?(HDU4027+势能线段树)
    Tunnel Warfare(HDU1540+线段树+区间合并)
    Computer(HDU2196+树形dp+树的直径)
    Anniversary party(树上dp+HDU1520)
    2018 Multi-University Training Contest 1-1002 -Balanced Sequence(括号匹配+贪心)
    暑假集训——cf热身赛部分题有感加其题解
    Educational Codeforces Round 47 (Rated for Div. 2) 题解
    计蒜客 Goldbach Miller_Rabin判别法(大素数判别法)
    多种方法过Codeforces Round #270的A题(奇偶法、打表法和Miller_Rabin(这个方法才是重点))
    Codeforces Round #494 (Div. 3)
  • 原文地址:https://www.cnblogs.com/GumpYan/p/13206485.html
Copyright © 2011-2022 走看看