Reactjs 从React中导入的组件获取事件

嗨，我有我的按钮组件，如图所示：

ButtonComp.js------
class ButtonComp extends Component {
   render() {
     <button onChange={this.props.onChangeHandler} /> // I can pass event from button to datamaker
   }
}

ButtonComp.js------
类ButtonComp扩展组件{
render（）{
//我可以将事件从按钮传递到数据生成器
}
}

我的datamaker.js如下所示：

dataMaker.js---------
import ButtonComp from '....';

 function onChangeHandler() {
}

function getSomeJsx() {
   return(
      <p>Hello</p>
      <ButtonComp onChangeHandler={onChangeHandler()}/> 
   );
}

const dataMaker = [
  {style: {..}, val: getSomeJsx()},
  {style: {..}, val: getSomeJsx()},
];
export default dataMaker;

dataMaker.js---------
从“..”导入按钮编码；
函数onChangeHandler（）{
}
函数getSomeJsx（）{
返回(
你好

);
}
常量数据生成器=[
{style:{..}，val:getSomeJsx（）}，
{style:{..}，val:getSomeJsx（）}，
];
导出默认数据生成器；

我的主要部分是：

MyComp.js-------
import datamaker from '../datamaker'

class MyComp extends Component {

   onChangeTriggerHere = () => {
      // I need the event here
   }

   render() {
     <div>
        datamaker.map(node => (
          <div style={node.style}>
             {node.val} ///which will render ButtonComp here
          </div>
        ))
     </div>
   }
}

mycop.js-------
从“../datamaker”导入数据生成器
类mycop扩展组件{
onChangeTriggerHere=（）=>{
//我需要这里的活动
}
render（）{
datamaker.map（节点=>(
{node.val}///将在此处呈现ButtonComp的
))
}
}

由于mycop中的值node.val是以数据形式出现的，而数据又是呈现ButtonComp的，所以我实在无法在mycop中知道事件是否确实发生过。

---

使用此结构是否有任何方法可以使MyComp获得ButtonComp产生的事件？

您可以按如下方式修改dataMaker：

function getSomeJsx(callback) {
  return (
    <div>
      <p>Hello</p>
      <ButtonComp onChangeHandler={callback}/> 
    </div>
  );
}

const dataMaker = [
  {style: {..}, val: callback => getSomeJsx(callback)},
  {style: {..}, val: callback => getSomeJsx(callback)},
];

函数getSomeJsx（回调）{ 返回( 你好

); } 常量数据生成器=[ {style:{..}，val:callback=>getSomeJsx（callback）}， {style:{..}，val:callback=>getSomeJsx（callback）}， ]; 在您的mycop中：

class MyComp extends Component {
  onChangeTriggerHere = () => {
    // I need the event here
    alert('ok');
  };

  render() {
    return datamaker.map(node => (
      <div style={node.style}>{node.val(this.onChangeTriggerHere)}</div>
    ));
  }
}

类MyComp扩展组件{
onChangeTriggerHere=（）=>{
//我需要这里的活动
警报（“正常”）；
};
render（）{
返回datamaker.map（节点=>(
{node.val（this.onChangeTriggerHere）}
));
}
}

因此，当在ButtonComp.js中调用onChange时，您希望调用mycop.js中的onChangeTrigger函数

因此，您需要将函数（onChangeTriggerHere）传递到ButtonComp.js组件

MyComp (onChangeTriggerHere) -> dataMaker -> ButtonComp

因此有两种情况：

案例1:当onChange事件发生时，您希望dataMaker和MyComp都采取行动。 如果是这种情况，那么只需将onChangeTriggerHere作为道具传递给dataMaker，然后在dataMaker的onChangeHandler中使用它。类似地，然后将onChangeHandler作为道具传递给ButtonComp

案例2:您只想让您的mycop在onChange事件发生时执行操作。

---

如果是这种情况，请使用React，以避免支柱钻孔。

您的问题不清楚，请重新思考并更新，以获得适当的帮助。