javascript - react 禁用所有事件。如何在生成 DOM 时忽略 `onClick` 和 `onChange` Prop

Question

我希望在“协商”模式下显示一个 React 组件及其子组件。这意味着自动删除所有 onClick , onChange , ... Prop 来自 <div> &公司我希望临时执行此操作，以便在需要时让我的组件恢复生机。

如果不手动，我怎么能做到这一点，在每个子组件中，条件 onClick 的使用& onChange ？我搜索了一种方法来说“嘿 react ，在为所有这些组件生成 DOM 时忽略 onClick 和 onChange Prop ”。

知道怎么做吗？我对替代解决方案持开放态度，这些解决方案将避免事件最终在 DOM 元素上触发。

Answer 1

嗯，你可能需要用另一个函数包装你的函数，然后你可以从一个点控制启用/禁用。

function activable(cb) {
  return function wrap(...args) {
    if (process.env.ENABLE_ACTIONS) {
      return cb(...args);
    }
  }
}

function MyComponent() {
   // It's better to pass in anon functions to our activable function so
   // that our function maintains it's scope.  Otherwise you would need
   // to bind the scope. Only if needed I guess, but good to be aware of.
   const onClick = activatable((e) => {
      console.log(e.target);
   });
   return (<button onClick={onClick}>do</button>);
}

是的，最初需要一些手动设置，但随后很容易控制。

---

这是一个运行示例:http://www.webpackbin.com/EJsecCwXW

转到 main.js 文件，然后更改顶部的 enableActions 标志，保存然后按下按钮。