react 知识点整理（二）

上一篇

六、react事件

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  sayHi = (msg = "你好，今年我要学好react") => {
    alert(msg);
  };
  render() {
    return (
      <div>
        {/* 事件 和普通js事件一致，需要驼峰式写法  */}
        <button onClick={() => alert("你好，我喜欢react")}>按钮一</button>
        <button onClick={()=>{this.sayHi("我是中国人")}}>按钮二-传参</button>
        <button onClick={this.sayHi.bind(this,"我是中国人")}>按钮三-传参</button>
      </div>
    );
  }
}

七、更新数据 setState

import React, { Component } from "react";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLog: false,
    };
  }
  render() {
    return (
      <div>
        {/* 更新数据 setState */}
        <button
          onClick={() => {
            this.setState({ isLog: !this.state.isLog });
          }}
        >切换</button>
        {this.state.isLog ? <p>法外狂徒张三</p> : <p>正义警长黑猫</p>}
      </div>
    );
  }
}

八、实现表单双向绑定

1.非受控表单

import React, { Component, createRef } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    //创建一个dom 引用
    this.inpRef = createRef();
  }
  getVal = () => {
    //获取表单值
    alert(this.inpRef.current.value);
  };
  render() {
    return (
      <div>
        {/* 非受控表单 */}
        <input type="text" ref={this.inpRef} />
        <button onClick={this.getVal}>获取值</button>
      </div>
    );
  }
}
export default App;

2.受控表单-双向绑定

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "你好,我喜欢react",
    };
  }
  changeMsg = (e) => {
    this.setState({ msg: e.target.value });
  };
  render() {
    return (
      <div>
        {/* 受控表单三种写法 */}
        <p>{this.state.msg}</p>
        <input type="text" value={this.state.msg} onChange={this.changeMsg} /><br />
        <input type="text" value={this.state.msg} onChange={this.changeMsg.bind(this)} /><br />
        <input type="text" value={this.state.msg} onChange={e=>this.changeMsg(e)} />
      </div>
    );
  }
}
export default App;

九、实现 todolist 功能

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 = "";
  };
  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>
        <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;

十、组件

1.函数组件与类组件

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <h1>组件</h1>
        <User></User>
        <Produce></Produce>
      </div>
    );
  }
}
export default App;
//一个函数就是一个组件  函数名称大写
function User() {
  return (
    <div>
      <div>一个函数组件</div>
      <hr />
    </div>
  );
}
//一个类就是一个组件
class Produce extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <p>一个类组件</p>
      </div>
    );
  }
}

2.组件的传参与图片的导入

import React, { Component } from "react";
//导入图片
import logo from "./logo.svg";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <h1>组件</h1>
        {/* 第一种导入图片到方法 */}
        <User item={{ name: "小明", font: logo }}></User>
        {/* 如果这样报错，看User是否写了默认参数 */}
        <User></User>
        <Produce></Produce>
        {/* 第二种导入图片的方法 */}
        <img src={require("./logo.svg").default} alt="" width="80" />
      </div>
    );
  }
}
export default App;

//默认参数
User.defaultProps = { item: { name: "张三", font: logo } };

//一个函数就是一个组件  函数名称大写
// props参数是单向数据流，是只读
function User(props) {
  return (
    <div>
      <div className="font">
        <img src={props.item.font} alt="" width="80" />
      </div>
      <div>{props.item.name}</div>
      <hr />
    </div>
  );
}
//一个类就是一个组件
class Produce extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <p>一个类组件</p>
      </div>
    );
  }
}

十一、组件的复用

import React, { Component } from "react";

class APP extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: "red",
      bgColor: "yellow",
    };
  }

  setColor = (v) => this.setState({ color: v });
  setBgColor = (v) => this.setState({ bgColor: v });
  render() {
    return (
      <div>
        <h1>子父传参</h1>
        <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) {
  return (
    <div>
      <button onClick={() => props.setColor("red")}>红</button>
      <button onClick={() => props.setColor("green")}>绿</button>
      <button onClick={() => props.setColor("blue")}>蓝</button>
      <button onClick={() => props.setColor("pink")}>粉</button>
    </div>
  );
}

下一篇