reactjs - 如何调度 SyntheticEvent 事件?

标签 reactjs

我正在开发一个没有任何输入/选择元素的组件,但我希望它表现得像一个组件,调度与 React 输入相同的事件,期望有这样的工作:

<div onChange={this.onChange}>
    <MyComponent/>
    <input type="text"/>
</div>

在该示例中,input 和 MyComponent 都应到达 this.onChange 监听器。

我知道如何分派(dispatch)真实的 DOM 事件,但这并不能将其发送到 onChange 监听器,而只能发送到 DOM 上的真实 addEventListener:

var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);

this.getDOMNode().dispatchEvent(event);

也许答案是here (或here?),但我仍在为此苦苦挣扎。

更新

感谢@limelights 准备了一个 Playground :

http://jsfiddle.net/coma/a8wgh5wk/1/

最佳答案

React 的 onChange 事件仅适用于表单控件,这意味着您永远无法让它们注册为 DIV 标记上的处理程序。

关于reactjs - 如何调度 SyntheticEvent 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30878534/

相关文章:

javascript - 使用 react-router 中的 MemoryRouter 使用 javascript 导航

javascript - 如何在 React 中单独切换多个显示

javascript - 尝试从 NodeJS Express API 中的 Reactjs 文件请求常量数据时出现未定义

javascript - 服务器 Node 代理中未发生 api 调用

javascript - 为什么悬停不能在 tr 上工作

css - 在带有 css-loader 和 Webpack 的 React 中使用字符串类名

javascript - 解构值 nextjs : ReferenceError: Cannot access 'XXX' before initialization

javascript - ReactJS 在表外渲染 tbody 数据

css - 是否可以在渲染某个 React 组件时应用不同的全局 CSS 规则?

javascript - 标识符预期 JSX for loop Eslint 错误