react学习笔记二

受控组件

HTML中表单元素是可输入的，有自己的状态。 react中状态通常保存在state中，并且只能通过setState()的方法来修改。  所以我们将state和表单value属性绑定到一起。

由state来控制表单值。

class Hello extends React.Component {
  state = {
    val: "test",
    ischecked: true,
  };
  // 修改input值
  changeVal = (e) => {
    this.setState({
      val: e.target.value,
    });
    console.log(this.state.val);
  };

  // 修改复选框
  changeChecked = (e) => {
    this.setState({
      ischecked: e.target.checked,
    });
    console.log(this.state.ischecked);
  };
  render() {
    return (
      <>
        {/* 输入框 */}
        <input value={this.state.val} onChange={this.changeVal} />
        {/* 复选框 */}
        <input
          type="checkbox"
          checked={this.state.ischecked}
          onChange={this.changeChecked}
        />
      </>
    );
  }
}

ReactDOM.render(<Hello />, document.querySelector("#root"));

多表单优化处理

表单的name必须和state状态中的名称保持一直。

根据表单的类型获取对应的值

在事件中通过[name]来修改对应的state

class Hello extends React.Component {
  state = {
    val: "test",
    ischecked: false,
  };
  //
  change = (e) => {
    // 获取dom元素
    const target = e.target;
    // 判断类型
    const value = target.type === "checkbox" ? target.checked : target.value;
    // 获取name
    const name = target.name;
    // 修改
    this.setState({
      [name]: value,
    });
  };

  render() {
    return (
      <>
        {/* 输入框 */}
        <input name="val" value={this.state.val} onChange={this.change} />
        {/* 复选框 */}
        <input
          name="ischecked"
          type="checkbox"
          checked={this.state.ischecked}
          onChange={this.change}
        />
      </>
    );
  }
}

ReactDOM.render(<Hello />, document.querySelector("#root"));

发布评论demo练习

class Comments extends React.Component {
  state = {
    // 初始化数据
    arr: [],
    name: "",
    content: "",
  };
  // input  change事件 修改state中数据
  change = (e) => {
    const name = e.target.name;
    this.setState({
      [name]: e.target.value,
    });
  };

  // 单击按钮提交数据
  addPl = () => {
    // 新增一个数组,数组中对象放表单信息，然后将原有的数组利用扩展运算符展开
    const a = [
      {
        id: Math.random(),
        name: this.state.name,
        value: this.state.content,
      },
      ...this.state.arr,
    ];
    this.setState({
      arr: a,
    });
  };
  render() {
    return (
      <>
        <div className="information">
          <input
            name="name"
            placeholder="评论人名称"
            value={this.state.name}
            onChange={this.change}
          />
          <textarea
            name="content"
            placeholder="评论内容"
            value={this.state.content}
            onChange={this.change}
          ></textarea>
          <button onClick={this.addPl}>发布评论</button>
          {this.state.arr.length === 0 ? (
            <div style={{ textAlign: "center" }}>还没有数据哦~</div>
          ) : (
            <ul>
              {/* 遍历数组 生成li */}
              {this.state.arr.map((item) => (
                <li key={item.id}>
                  <h4>评论人:{item.name}</h4>
                  <h4>内容:{item.value}</h4>
                </li>
              ))}
            </ul>
          )}
        </div>
      </>
    );
  }
}

ReactDOM.render(<Comments />, document.querySelector("#root"));

组件传值 父->子

传递的数据类型：字符串、数值、数组、函数、jsx...

props是只读的，不可直接赋值修改。

类组件 - 父传子

父组件通过属性传值，子组件使用this.props.属性名接收

//index.js
// 导入react和react-dom
import React from "react";
import ReactDOM from "react-dom";

import Son from "./son.js";

class Father extends React.Component {
  render() {
    return (
      <div>
        <Son name="阿西吧" age="18"></Son>
      </div>
    );
  }
}
ReactDOM.render(<Father />, document.querySelector("#root"));


//son.js
import React from "react";
class Son extends React.Component {
  render() {
    return (
      <div>
        {this.props.name}----
        {this.props.age}
      </div>
    );
  }
}

export default Son;

函数组件 - 父传子

父组件通过属性传递,子组件用形参接受  props是一个对象

props.属性名

//index.js
// 导入react和react-dom
import React from "react";
import ReactDOM from "react-dom";

import Son from "./son.js";

function Father() {
  return <Son name="张三" age="18"></Son>;
}
ReactDOM.render(<Father />, document.querySelector("#root"));

//son.js
import React from "react";

function Son(props) {
  return (
    <div>
      {props.name}----{props.age}
    </div>
  );
}

export default Son;

组件传值 子->父

父组件声明函数，将声明后的函数传递给子组件。

子组件调用，并传递参数。

父组件形参即可接受子组件传递后的参数。

//index.js

// 导入react和react-dom
import React from "react";
import ReactDOM from "react-dom";
import Son from "./son.js";
class Father extends React.Component {
  state = {
    value: "",
  };
  changeMsg = (value) => {
    this.setState({
      value: value,
    });
  };
  render() {
    return (
      <div>
        传递的值为：{this.state.value}
        <Son getChangeMsg={this.changeMsg}></Son>
      </div>
    );
  }
}
ReactDOM.render(<Father />, document.querySelector("#root"));
//-------------------------------------------------------------------------
//son.js

import React from "react";
class Son extends React.Component {
  go = () => {
    this.props.getChangeMsg(Math.random());
  };
  render() {
    return <button onClick={this.go}>传值</button>;
  }
}
export default Son;

跨组件通信 -> Context

当不同js文件下的组件传值的时候，需要新建一个公共的js文件

结构出Provider和Consumer并导出

在需要用到Provider，Consumer的文件在按需导入使用

//index.js--------------------------------------------------------
// 导入react和react-dom
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "./event.js";
import Son from "./son.js";
class Father extends React.Component {
  render() {
    return (
      <div>
        <Provider value="这是传递的数据">
          <Son></Son>
        </Provider>
      </div>
    );
  }
}
ReactDOM.render(<Father />, document.querySelector("#root"));

//son.js--------------------------------------------------------
import React from "react";
import { Consumer } from "./event.js";
class Son extends React.Component {
  render() {
    return (
      <div>
        <Consumer>{(data) => <span>{data}</span>}</Consumer>
      </div>
    );
  }
}
export default Son;

//event.js--------------------------------------------------------
import React from "react";
const { Provider, Consumer } = React.createContext();
export { Provider, Consumer };