react发布评论练习

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

import "./css/test.css";

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"));