react从入门到精通2

表单

获取input输入值

页面效果

import React, { Component, createRef } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: '你好'
        }
        this.inRef = createRef()
    }

    getVal = () => {
        //this 指向 Component    inRef 对应的 input     current 固定写法   value input的输入值
        alert(this.inpRef.current.value)
    }
    render() {
        return (<div>
            {/*获取input的value*/}
            <input type="text" ref={this.inRef} />
            <button onClick={this.getVal}>获取value</button>        

        </div>);
    }
}

export default App;

实现双向绑定

案例

遍历对象与数组

import React, { Component } from 'react'
// 类组件
class App extends Component {
    constructor(props) {
        super(props); this.state = {
            list: [{ title: '学习vue', done: true },{ title: "学习react", done: true },{ title: "学习html ", done: true }],
            list2: ["a", "b", 3, 5, 6]
        }
    }
    render() {
        return (
            <div>
                {this.state.list.map(item =>
                    <div className='item' key={item.title}>
                        <span>{item.title}</span>
                    </div>)
                }
                {this.state.list2.map((item, index) =>
                    <div className='item' key={index}>
                        <span>{item}</span>
                    </div>)
                }
            </div>
        );
    }

}
export default App;

todolist

功能：

• 实现增加
• 实现删除
• 实现单选框可以修改
• 实现input选中添加到已完成，不选中添加到未完成
  页面效果
  

import React, { Component, createRef } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { title: "学习vue", done: true },
                { title: "学习react", done: false },
            ]
        }
        //  创建一个dom引用
        this.tempRef = createRef();
    }
    //删除
    delItem = item => {
        // 缓存list
        var list = this.state.list;
        // 查找下标
        var ind = list.findIndex(value => value.title == item.title);
        // 删除
        list.splice(ind, 1);
        // 更新(setState才会触发视图的更新)
        this.setState({ list });
    }
    // 添加
    addItem = () => {
        // 缓存list
        var list = this.state.list;
        // 缓存input
        var inp = this.tempRef.current;
        // 添加
        list.unshift({ title: inp.value, done: false });
        // 更新视图
        this.setState({ list });
        // 清除input内容
        inp.value = '';

    }
    // item发生变化，更新item
    checkItem = item => {
        // 缓存list
        var list = this.state.list;
        // 查找下标
        var ind = list.findIndex(value => value.title == item.title);
        //  值去反
        list[ind].done = !list[ind].done;
        // 更新视图
        this.setState({ list });
    }
    render() {
        return (<div>
            <input type="text" ref={this.tempRef} />
            <button onClick={this.addItem}>添加</button>
            {/* filter(item=>!item.done)  filter(item=>item.done) 是为了实现input选中添加到已完成，不选中添加到未完成 */}
            <h3>正在进行 {this.state.list.filter(item => !item.done).length}</h3>
            {this.state.list.filter(item => !item.done).map(item => <div className='item' key={item.title}>
                <input type="checkbox" checked={item.done} onChange={this.checkItem.bind(this, item)} />
                <span>{item.title}</span>
                <button onClick={this.delItem.bind(this, item)}>x</button>
            </div>)
            }
            <h3>已经完 {this.state.list.filter(item => item.done).length}</h3>
            {this.state.list.filter(item => item.done).map(item => <div className='item' key={item.title}>
                <input type="checkbox" checked={item.done} onChange={this.checkItem.bind(this, item)} />
                <span>{item.title}</span>
                <button onClick={this.delItem.bind(this, item)}>x</button>
            </div>)
            }
        </div>);
    }
}

export default App;

组件

函数组件与类组件

页面效果

import React, { Component } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
    	//使用组件
        return (<div style={{ "padding": "30px" }}>
            <h1>组件</h1>
            <h3>函数组件</h3>
            <User></User>
            <h3>类组件</h3>
            <Produce></Produce>
        </div>);
    }
}

export default App;
//一个函数就是一个组件
//定义函数组件 User组件名（自定义第一个子母大写）
function User(params) {
    return <div>
        <div className='avatar'>头像</div>
        <div>小天</div>
    </div>
}
//定义类组件 Produce组件名（自定义第一个子母大写）
class Produce extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (<div>
            <div>商品图片</div>
            <div>商品价格</div>
            <div>商品命名</div>
            <div>商品价格</div>
        </div>);
    }
}

组件传递参数

页面效果

//引入入图片
import logo from './logo.svg';
import h5 from './h5.jpg';

//父组件传递参数
       return (<div style={{ "padding": "30px" }}>
      	<h1>组件</h1>
      	{/*传递参数*/}
      	<User item={{ name: "小明", avatar: logo }}></User>
      	<User item={{ name: "老王", avatar: h5 }}></User>
    </div >);


//子组件接受参数
//  props接收参数  props参数是单向数据流，是只读
function User(props) {
  return <div>   
    <img src={props.item.avatar} alt="" width="80" />   
    <div>{props.item.name}</div>
    <hr />
  </div>
}
// 默认参数
User.defaultProps = { item: { name: "游客", avatar: h5 } }

组件子向父传参

页面效果

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { color: "red", bgColor: 'yellow' }
  }
  // setColor = v => console.log(v);
  setColor = v => this.setState({ color: v })
  setBgColor = v => this.setState({ bgColor: v })
  render() {
    return (<div style={{ "padding": "30px" }}>
      <h3 style={{ color: this.state.color }}>子父传参</h3>
      {/* 把方法当属性props传入给子元素Ctrl */}
      <Ctrl setColor={this.setColor}></Ctrl>
      <h3 style={{ backgroundColor: this.state.bgColor }}>颜色控制器</h3>
      <Ctrl setColor={this.setBgColor}></Ctrl>
    </div>);
  }
}
export default App;
// 在子组件单击按钮，执行父组件的setColor方法
function Ctrl(props) {
  // console.log(props);
  return (
    <div>
      <button onClick={() => props.setColor('red')}>红</button>
      <button onClick={() => props.setColor('green')}>绿</button>
      <button onClick={() => props.setColor('blue')}>蓝</button>
      <button onClick={() => props.setColor('yellow')}>黄</button>
    </div>

  )
}