react简单教程（自学记录）

list列表

/*
 * @Author: your name
 * @Date: 2021-08-31 09:40:06
 * @LastEditTime: 2021-08-31 17:06:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /react/demo02/src/xiaojiejie.js
 */
import React, { Component, Fragment } from "react";

import ItemChild from "./components/ItemChild";
class Xiaojiejie extends Component {
  //js的构造函数，由于其他任何函数执行
  constructor(props) {
    super(props); //调用父类的构造函数，固定写法
    this.state = {
      inputValue: "", // input中的值
      list: ["测试", "aa1"], //服务列表
    };
    this.inputChange = this.inputChange.bind(this);
    this.addItem = this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
  }
  render() {
    return (
      <Fragment>
        <div>
          <input
            placeholder="请输入服务项目"
            onChange={this.inputChange}
            value={this.state.inputValue}
          />
          <button onClick={this.addItem}> 增加服务 </button>
        </div>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <ItemChild
                key={item + index}
                index={index}
                content={item}
                deleteItem={this.deleteItem}
              ></ItemChild>
            );
          })}
        </ul>
      </Fragment>
    );
  }
  inputChange(e) {
    this.setState({
      inputValue: e.target.value,
    });
  }
  addItem() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
    });
  }
  deleteItem(index) {
    let list = this.state.list;
    list.splice(index, 1);
    this.setState({
      list: list,
    });
  }
}

export default Xiaojiejie;

item子组件

/*
 * @Author: your name
 * @Date: 2021-08-31 09:41:39
 * @LastEditTime: 2021-08-31 17:06:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /react/demo02/src/components/Item.js
 */
import React, { Component, Fragment } from "react";
import ProTypes from "prop-types";
class ItemChild extends Component {
  //创建构造函数绑定this
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  render() {
    return (
      <Fragment>
        <li onClick={this.handleClick}>{this.props.content}</li>
      </Fragment>
    );
  }
  handleClick() {
    this.props.deleteItem(this.props.index);
  }
}
//注意，此处是小写
ItemChild.propTypes = {
  content: ProTypes.string,
  deleteItem: ProTypes.func,
  index: ProTypes.number,
};

export default ItemChild;