React事件传参深度理解

1.第一种方式，用一个箭头函数包在外面，因为这个箭头函数只有点击的时候才会执行，只有当这个箭头函数执行的时候，里面调用的方法才会执行

// 子组件负责传递参数
render() {
    return (
        <ol>
          {
            this.props.todos.map(item => {
              return (
                <li key={item.id}>
                  <span>{item.title}</span>
                  <button onClick={() => {this.props.handleDelectItem(item.id)}}>删除</button>
                </li>
              )
            })
          }
        </ol>
    )
  }
复制代码

// 父组件负责接受传过来的参数，进行处理
handleDelectItem = (id) => {
    const todos = this.state.todos.filter(item => item.id !== id)
    this.setState({
      todos
    })
  }
  
render() {
    return (
      <div>
          <ToDoList todos={this.state.todos} handleDelectItem={this.handleDelectItem}/>
      </div>
    );
  }
复制代码

注意：

如果在子组件中不用箭头函数将调用的方法包起来，该方法会立即执行（就相当于立即执行函数）

render() {
    return (
        <ol>
          {
            this.props.todos.map(item => {
              return (
                <li key={item.id}>
                  <span>{item.title}</span>
                  <button onClick={ this.props.handleDelectItem(item.id)}>删除</button>
                </li>
              )
            })
          }
        </ol>
    )
  }
复制代码

2.第二种方式，使用bind，这个时候，可以用第二个参数来传递参数，因为bind不会立即执行(不用call是因为call方法会立即执行)

// 子组件
render() {
    return (
        <ol>
          {
            this.props.todos.map(item => {
              return (
                <li key={item.id}>
                  <span>{item.title}</span>
                  <button onClick={this.props.handleDelectItem.bind(this, item.id)}>删除</button>
                </li>
              )
            })
          }
        </ol>
    )
  }
复制代码

 // 父组件
 handleDelectItem = (id) => {
    const todos = this.state.todos.filter(item => item.id !== id)
    this.setState({
      todos
    })
  }
  
render() {
    return (
      <div>
          <ToDoList todos={this.state.todos} handleDelectItem={this.handleDelectItem}/>
      </div>
    );
  }
复制代码

3.第三种方式，使用原生的event来传递参数，把要传递的参数绑定到dom的自定义属性上（该方法，有待完善，删除功能还未实现）

// 子组件
handleDelectItemEvent = (e) => {
      const id = (e.currentTarget.getAttribute('data-id'))
      console.log("里面的",id)
      this.props.handleDelectItem(id)
    }
    
render() {
    return (
        <ol>
          {
            this.props.todos.map(item => {
              return (
                <li key={item.id}>
                  <span>{item.title}</span>
                  <button data-id={item.id} onClick={this.handleDelectItemEvent}>删除</button>
                </li>
              )
            })
          }
        </ol>
    )
  }
复制代码

// 父组件
handleDelectItem = (id) => {
    const todos = this.state.todos.filter(item => item.id !== id)
    this.setState({
      todos
    })
  }
  
render() {
    return (
      <div>
          <ToDoList todos={this.state.todos} handleDelectItem={this.handleDelectItem}/>
      </div>
    );
  }
复制代码

4.第四种方式，react官方推荐

// 子组件(ToDoItem为孙子组件)
render() {
    return (
        <ol>
          {
            this.props.todos.map(item => {
              return (
                <ToDoItem key={item.id} {...item} handleDelectItem={this.props.handleDelectItem}/>
              )
            })
          }
        </ol>
    )
  }
复制代码

// 孙子组件（handleRemove方法是祖先组件通过父组件在传给孙子组件）
handleRemove = () => {
    this.props.handleDelectItem(this.props.id)
  }
  render() {
    console.log(this.props)
    return (
      <li>
        <span>{this.props.title}</span>
        <button onClick={this.handleRemove}>删除</button>
      </li>
    )
  }
复制代码

// 祖先组件
handleDelectItem = (id) => {
    const todos = this.state.todos.filter(item => item.id !== id)
    this.setState({
      todos
    })
  }
  
render() {
    return (
      <div>
          <ToDoList todos={this.state.todos} handleDelectItem={this.handleDelectItem}/>
      </div>
    );
  }
复制代码

补充

1.defaultProps定义静态属性，用于设置默认的Props(外面有传入，则用传入的，没有则使用默认的)

// 子组件
static defaultProps = {
    btnText: '添加'
  }
 
  render() {
    return (
      <div>
        <button onClick={this.handleAddItem}>{this.props.btnText}</button>
      </div>
    )
  }
复制代码

外部有传入

// 父组件
render() {
    return (
      <div>
        <Input addToTitle={this.addToTitle} btnText='ADD'/>
      </div>
    );
  }
复制代码

外部没有传入

// 父组件
render() {
    return (
      <div>
        <Input addToTitle={this.addToTitle}/>
      </div>
    );
  }
复制代码

2.prop-types静态属性，用于检测props的类型（哪里要用就在哪里引入）

import PropTypes from 'prop-types'
复制代码

注意：

注意大小写，这里是PropTypes,用于props类型检查，这个需要安装（cnpm i prop-types -S）详情见npm官网www.npmjs.com/

static propTypes = {
    buttonText: PropTypes.string.isRequired
  }
复制代码

3.classname用于动态添加className到react组件，这个需要安装（cnpm i classname -S） 详情见npm官网www.npmjs.com/

转载于:https://juejin.im/post/5c222af651882569732456ec