Question

我有一个Dropdown组件，它在组件内部的按钮上使用onClick = {this.openDrop}。该组件如下：

Department

我希望将内容作为props.children获取如下：

<VideoView
    android:id="@+id/bgVideoView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:alpha="0"
    android:soundEffectsEnabled="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

并按以下方式使用

import React, { Component } from 'react'

export default class Dropdown extends Component {
  constructor(){
    super()

    this.state ={
      subMenu: ''
    }

    this.openDrop = this.openDrop.bind(this)
    this.closeDrop = this.closeDrop.bind(this)
  }

  closeDrop(){
    this.setState({subMenu: ''}, ()=>{
      document.removeEventListener('click', this.closeDrop)
    })
  }

  openDrop(e){
    e.preventDefault()
    this.setState({subMenu: 'open'}, ()=>{
      document.addEventListener('click', this.closeDrop)
    })
  }

  render(){
    return (
      <div className={`btn-group ${this.state.subMenu}`}>
        <button type="button" className="btn btn-default dropdown-openDrop" onClick={this.openDrop}>
          Action <span className="caret"></span>
        </button>
        <ul className="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" className="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    )
  }
}

但问题是我无法将onClick = {this.openDrop}传递给按钮。

如何传递onClick = {this.openDrop}？

Answer 1

您可以使用React.Children迭代组件的所有子项。我们可以使用React.clone(element,{ additionalProps })来添加道具来克隆每个孩子。在这里，我们检查孩子是否是一个按钮并添加onClick道具。

render() {
    const {children} = this.props;

    var childrenWithProps = React.Children.map(children, child => {
      if (child.type == "button") {
        return React.cloneElement(child, { onClick: this.openDrop })
      } else {
        return React.cloneElement(child)
      }
    });

    return (
      <div className={`btn-group ${this.state.subMenu}`}>{childrenWithProps}</div>
    );
  }

Answer 2

您需要将道具传递给内部组件，以便在使用componentWillReceiveProps收到道具时，您可以设置您的州，例如。

constructor() {
    this.state={
        toggle: false
   }  
}
toggleDropdown(){
    this.setState({toggle: true})
}
<Dropdown toggle={this.state.toggle}>
    <button type="button" onClick={this.toggleDropdown()} className="btn btn-default dropdown-openDrop">
      Action <span className="caret"></span>
    </button>
    <ul className="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" className="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
</Dropdown>

你必须将切换道具传递给你的下拉组件，现在在你的Dropdown组件中你会收到这些道具，当它真的你可以setState你的子菜单，只是一个想法，还有其他很多如何做到这一点。

如何将函数从父母传递给孩子做出反应？

2 个答案: