react小计--持续更新_react表格小计-CSDN博客

本文链接：https://blog.csdn.net/wq_wangqiang/article/details/117151675

绑定属性注意：其他属性和之前写法是一样的

class要换成className

for要换成htmlFor

style绑定样式

<div style={{"color":"red","fontSize":"40px"}}></div>

绑定图片--远程图片src="远程图片地址"

import image from '../images/1.jpg';
<image src = {image} />
//或者用es6语法
<image src = {require(../images/1.jpg)} />

改变this指向的方法

this.getdate.bind(this)

在构造函数中
this.getdate = this.getdate.bind(this)

getdate = ()=>{}  用箭头函数改变this指向

获取input框值

inputChange=(e)=>{
   //通过target获取值
   this.setState({
      username: e.target.value
   })
   //通过refs获取值
   //1.给元素定义ref属性
   //2.通过this.refs.属性名获取节点
   this.setState({
      username: this.refs.username.value
   })  
}

getInput=()=>{
    this.state.username;
}
<input  ref="username" onChange={this.inputChange}> <button onClick={this.getInput}></button>

键盘监听事件

inputKeyUp=(e)=>{
    console.log(e.keyCode);
    if(e.keyCode==13){   //13回车code
        alert(e.target.value)
    }
}
<input onKeyUp={this.inputKeyUp}>   //onKeyUp 按键抬起触发 onKeyDown 按键按下不抬起一只触发   onKeyPress

双向数据绑定：mode改变影响view view反过来影响mode

import React, { PureComponent } from 'react'
class www extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            username:'wwww'
        };
    }
    inputChange=(e)=>{
        this.setState({
            username:e.target.value
        })
    }
    buttonClick=()=>{
        this.setState({
            username:'sssssssss'
        })
    }
    render() {
        return (
            <div>
                {/* mode改变自动影响view react天生支持     view改变mode 数据双向绑定 */}
                <input value = {this.state.username} onChange={this.inputChange}></input>
                <button onClick={this.buttonClick}>update username value</button>
            </div>
        );
    }
}

export default www;

代办事项列表

import React, { PureComponent } from 'react'

class todolist extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            list:[]
        };
    }
    buttonClick=()=>{
       //let title = this.refs.title.value;//返回值是一个索引值
       let templist = this.state.list;
       templist.push(this.refs.title.value) 
       this.refs.title.value='';
       this.setState({
           list:templist
       })
    }
    deleteTitle=(key)=>{
        let templist = this.state.list;
        //arrayObject.splice(index,howmany,item1,.....,itemX)
        // index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
        // howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
        // item1, ..., itemX	可选。向数组添加的新项目。
        templist.splice(key,1);
        this.setState({
            list:templist
        })
    }
    render() {
        return (
            <div>
                <input ref='title'></input>
                <button onClick={this.buttonClick}>增加+</button>
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            retunr {
                                <li key={key}>{value} <button onClick={this.deleteTitle.bind(this.key)}>删除-</button></li>
                            }
                        })
                    }
                </ul>
            </div>
        );
    }
}
export default todolist;

代办一般列表数据切换

import React, { PureComponent } from 'react'
import { storage } from "./storage";
class todolist extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            list:[
                {
                    title:"录制ICON",
                    check:true
                }, {
                    title:"录制REACT",
                    check:false
                }, {
                    title:"录制VUE",
                    check:false
                }, {
                    title:"录制AngularJS",
                    check:false
                }
            ]

        };
    }
    addData=(e)=>{
         if(e.keyCode == 13){
            let title = this.refs.title.value;
            let tempList = this.state.list;
            tempList.push({
                title : title,
                check : false
            });
            this.setState({
                list : tempList
            })
            this.refs.title.value='';
         }
         //localStorage缓存数据  只能保存字符串 保存不了对象或者数组 
         //localStorage.setItem('todolist',JSON.stringfly(tempList));
         storage.set('todolist',tempList);
    }
    checkbocChange=(key,value)=>{
        let tempList = this.state.list;
        tempList[key].check = ! tempList[key].check; //直接取反就是checkbox选中或不选中
        this.setState({
            list : tempList
        })
        // localStorage.setItem('todolist',JSON.stringfly(tempList));
        storage.set('todolist',tempList);
    }
    deleteData=(key)=>{
        let tempList = this.state.list;
        tempList.splice(key,1);
        this.setState({
            list : tempList
        })
        // localStorage.setItem('todolist',JSON.stringfly(tempList));
        storage.set('todolist',tempList);
    }

    //生命周期函数--加载页面就会触发
    componentDidMount() {
        // var todolist = JSON.parse(localStorage.getItem('todolist'));//缓存中获取数据
        storage.get('todolist');
        if(list){
            this.setState({
                list : todolist
            })
        }

    }
    render() {
        return (
            <div>
                <input ref="title" onkeyDown={this.addData}/>
                <h2>待办事项</h2>
                <hr/>
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            if(!value.check){
                                return (
                                    <li key={key}>
                                        <input type = "checkbox" checked = {value.check} onChange={this.checkbocChange.bind(this,key,value)}/>
                                        {value.title}
                                        <button onClick={this.deleteData.bind(this.key)}>删除</button>
                                    </li>
                                )
                            }
                        })
                    }
                </ul>
                <h2>已完成事项</h2>
                <hr/>
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            if(value.check){
                                return (
                                    <li key={key}>
                                        <input type = "checkbox" checked = {value.check} onChange={this.checkbocChange}/>
                                        {value.title}
                                        <button onClick={this.deleteData.bind(this.key)}>删除</button>
                                    </li>
                                )
                            }
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default todolist;

自己封装localStorage缓存工具

var storage={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    }
};
export default storage;

父子组件传值，方法，以及父组件本身

父组件主动获取子组件

1父组件调用子组件的时候指定ref的值 <Header ref = 'header'></Header>

2父组件通过this.refs.header 获取整个子组件实例 ps：dom 组件加载完成或获取

import React,{Component} from 'react';
import Header from './Header';
/**
 * 父组件  首页   父子组件传值
 * 说明：父组件不单单可以给子组件传值，还可以给子组件传方法，以及把整个父组件穿给子组件
 */
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是首页组件',
            title:'首页组件'
         };
    }
    fatherFunction=()=>{
        alert('我是父组件的方法');
    }
    gettitle=()=>{
        alert(this.state.title);
    }
    //获取子组件穿过来的值
    getChildDate=(resule)=>{
        // alert(resule);
        this.setState({
            msg:resule
        });
    }
    render() {
        return (
            <div>
                <Header title = {this.state.title}              //传值
                fatherFunction = {this.fatherFunction}          //传方法
                home = {this}                                   //传整个父组件
                ></Header>         

                 {this.state.msg}                
            </div>
        );
    }
}

export default Home;

/**defaultProps 如果多个组件调用Header组件，在条用是并没有传title的值，这个时候就会取 defaultProps中设置的默认的title值*/

/**通过 PropTypes定义父组件给子组件传值的类型如果类型不符console 控制台会输出warning警告*/

import React,{Component} from 'react';
import PropTypes from 'prop-types';
/**
 * 父子组件传值
 */
class Header extends Component {
    state = {  }
    constructor(props){
        super(props);
        this.state = {
            msg:'头部组件'
        }
    }
    getHome=()=>{
        let msg = this.props.home.state.msg; //获取父组件的msg
    } 
    render() {
        return (
            <div>
                {this.props.title}}
                <button onClick = {this.props.fatherFunction}>调用父组件传来的方法</button>

                <button onClick = {this.getHome}>获取整个父组件</button>

                <button onClick = {this.props.home.gettitle}>获取整个父组件，中的gettitle方法</button>

                <button onClick = {this.props.home.getChildDate.bind(this,'我是子组件数据')}>子组件调用父组件给父组件传值</button>
            </div>
        );
    }
}
/**defaultProps 如果多个组件调用Header组件，在条用是并没有传title的值，这个时候就会取 defaultProps中设置的默认的title值*/
Header.defaultProps={
    title:'标体'
}
/**通过 PropTypes定义父组件给子组件传值的类型   如果类型不符console  控制台会输出warning警告*/ 
Header.propTypes={
    num:PropTypes.number
}
export default Header;