React 实用基础合集（1）

使用 {xxx这里面写表达式，可理解为动态内容，常规 判断或者 三元表达式}
   vue 使用 {{xxx这里放内容}} 这个叫vue模版
复制代码

写class 使用 className="xxx写这里"
        动态的  className = {this.state.class1}
    写style={{xx:"xx"}} 里面 大括号 可以拿出来 作为整体 然后再传入
      静态 怎么写 style="color: 'red'"
复制代码

1、引入组件
    2、使用 <List xxx/> 传递属性 
        需要注意的是 react 组件命名开头必须为大写的 
复制代码

1、判断条件
if(xxx){}else{xxx}
2、三元
{ a ? b : c }
3、&& 
{a && b}
2、列表渲染
复制代码

1、react 事件写法 onXxxxx   比如 onClick={this.handle}  onChange={this.change1} 
2、绑定 this 在 constructor 里面写 更好 ，因为 只执行一次 ，如果绑定在按钮上会多次触发
3、绑定的函数 当前更加推荐的写法 这样 不用在bind绑定 this
复制代码

1、event 是 react 合成的事件 非原生事件
2、虽为合成事件  但具备所有原生事件的能力
3、event.nativeEvent 是原生事件对象PointerEvent
4、事件被绑定到 document 上（16）
复制代码

import React from "react";
function handleClick(e) {
  e.preventDefault(); // 阻止默认事件
  e.stopPropagation(); // 阻止冒泡
  console.log("target", e.target); //a 标签
  //   console.log("current target", e.current.target); // TypeError: Cannot read property 'target' of undefined
  console.log("nativeEvent", e.nativeEvent); // PointerEvent{xxx}
  console.log("nativeEvent target", e.nativeEvent.target); // a标签
  console.log("nativeEvent current target", e.nativeEvent.current.target); // Cannot read property 'target' of undefined
}
function Event() {
  return (
    <a href="www.baidu.com" onClick={handleClick}>
      clike me
    </a>
  );
}
export default Event;
复制代码

import React, { Component } from "react";
class Handle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "jack",
    };
  }
  handleChange = (e) => {
    this.setState({
      name: e.target.value,
    });
  };
  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <label htmlFor="inputValue">姓名：</label>
        <input
          id="inputValue"
          value={this.state.name}
          onChange={this.handleChange}
        ></input>
      </div>
    );
  }
}
export default Handle;
复制代码

import React, { Component } from "react";
import PropTypes from "prop-types";
class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  onChange = (e) => {
    this.setState({
      title: e.target.value,
    });
  };
  onSubmit = () => {
    const { submit } = this.props;
    submit(this.state.title);
  };
  render() {
    return (
      <div>
        <input value={this.state.title} onChange={this.onChange}></input>
        <button onClick={this.onSubmit}>提交</button>
      </div>
    );
  }
}
//props 类型检查
Input.propTypes = {
  submit: PropTypes.func.isRequired,
};
function List(props) {
  const { list } = props;
  return (
    <ul>
      {list.map((item, index) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}
//props 类型检查
List.propTypes = {
  list: PropTypes.arrayOf(PropTypes.object).isRequired,
};
class ToDoList_1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: 1,
          title: "text1",
        },
        {
          id: 2,
          title: "text2",
        },
      ],
    };
  }
  submit = (title) => {
    this.setState({
      list: this.state.list.concat({
        id: `id-${Date.now()}`,
        title,
      }),
    });
  };
  render() {
    return (
      <div>
        <Input submit={this.submit} />
        <List list={this.state.list} />
      </div>
    );
  }
}
export default ToDoList_1;
复制代码