Question

我正在构建一个下拉组件，该组件将按钮元素作为道具。这是我要做什么的简短描述：

class Dropdown extends React.Component {
   render() {
     let button = this.props.trigger;
     // How do I get a ref to the button native DOM node?
     // How can I attach a react event to the button?

   }
}

这就是我要使用的方式：

class App extends React.Component {
   render() {
     return (
          <Dropdown trigger={<button>Click me</button>}>
               dropdown content
          </Dropdown>
    )
   }
}

简而言之，如果我有一个带有react元素的变量，
1.如何获得对作为道具传递的按钮dom节点的引用？（我需要将其传递给dom-align）。
2.如何将事件侦听器附加到传递的button元素上？

Answer 1

这就是通过按钮的箭头功能组件以及传递ref和事件侦听器来实现的。

const Button = ({buttonRef, onEvent}) => <button ref={buttonRef} onEvent />

class Parent extends Component {
  methodForButton = e => {...}
  render() {
    return (
      <Dropdown
        propButton={
         <Button buttonRef={el => this.buttonElement = el} onEvent={this.methodForButton} />
        }
      >{...}<Dropdown />
    );
  }
}

您还可以将Button作为孩子而不是道具来传递

<Dropdown><Button /><Dropdown />

Answer 2

//For creating reference const (inside constructor)
  ref_name = React.createRef();
// For connect ref to html
   <tag ref={this.ref_name}></tag>

// For creating event create a class method
   handleClick(){}
//Register it inside constructor
  this.handleClick = this.handleClick.bind(this);
// attach with html
  <button onClick={this.handleClick}>Click</button>

class App extends React.Component {
   constructor(props){
      super(props);
      this.button_ref = React.createRef();
      this.handleClick = this.handleClick.bind(this);
   }
   handleClick(event){
       //write your code...
   }

   render() {
       return (
                <Dropdown trigger={<button ref={this.button_ref} onClick={this.handleClick}>Click me</button>}>
                   dropdown content
                </Dropdown>
       )
   }
}

作为prop动态事件传递的react元素的React ref

2 个答案: