React绑定事件的方法

import React from 'react'

class App extends React.Component {
  render() {
    const boss = '李云龙'
    return (
      <div>
        <h2>独立团团长，{boss}</h2>
        <Battalion1 boss='张大喵'></Battalion1>
        <Squadron boss='孙德胜'></Squadron>
      </div>
    )
  }
}

function Squadron(props) {
  return <h2>骑兵连连长，{props.boss}，冲啊！</h2>
}

class Battalion1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      solders: [
        '虎子',
        '柱子',
        '王根生'
      ]
    }
    // this.addSolder = this.addSolder.bind(this)
  }
  addSolder = () => {
    console.log('addSolder')
    this.setState({
      solders: [
        ...this.state.solders, '新兵蛋子' + Math.random()
      ]
    })
  }
  render() {
    // const boss = '张大喵'
    return (
      <div>
        <h2>一营营长，{this.props.boss}</h2>
        {/* <button onClick={() => this.addSolder()}>新兵入伍</button> */}
        <button onClick={this.addSolder}>新兵入伍</button>
        <ul>
          {this.state.solders.map(v => {
            return <li key={v}>{v}</li>
          })}
        </ul>
      </div>
    )
  }
}

export default App

 

import React from 'react';
import './CommentList.css'

class CommentList extends React.Component {
  constructor(props) {
    super(props)
  }
  handleDeleteComment = () => {
    console.log("绑定事件成功")
  }
  render() {
    const { comments } = this.props
    return (
      <div>
        <label>评论列表</label>
        <ul>
          {
            comments.map((comment, index) => 
              <li key={index}>
                {comment}
                <button  
                  key={index}
                  onClick={this.handleDeleteComment}
                >
                  删除
                </button>
              </li>
            )
          }
        </ul>
      </div>
    )
  }
}

export default CommentList;