时间戳

首页 > 解决方案 > 如何为从父组件传入的按钮分配点击事件？

reactjs - 如何为从父组件传入的按钮分配点击事件？

问题描述

我有一个 FileUploader 需要通过 prop 从组件外部触发，我已经战斗了几个小时，但无法弄清楚。

export class App {
   let button = (<button>Click me please!</button>);
   render() {
      return (
         <div className="app">
            {button}

            <FileUploader trigger={button} />
         </div>
      );
   }
}

export class FileUploader {
  constructor(props) {
     this.trigger = props.trigger; // <button>Click me please!</button>

     // do something to attach an onclick trigger element to simulate a 
     // click to the file input
  }

  render() {
      return (
         <div className="file-uploader">
            <input type="file" style="display: none;">
            <div>
               // display the file image and some other additional file info
            </div>
         </div>
      );
  }
}

我希望this.trigger将模拟对输入的单击，这将打开一个窗口来选择文件.. 我该怎么做？非常感激

标签： reactjs

解决方案

这是一个小示例，说明如何将函数从父组件传递给子组件并从子组件调用它们。

import React from "react";
import ReactDOM from "react-dom";

class Children extends React.Component {
  constructor(props) {
    super(props);
    this.onPress = props.onPress;
  }

  render = () => {
    return (
      <div>
        <button onClick={this.onPress} color="success">
          Child Click
        </button>
      </div>
    );
  };
}

class Parent extends React.Component {
  fromParent = () => {
    alert("Called from children");
  };
  render() {
    return <Children onPress={this.fromParent} />;
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

推荐阅读