我正在尝试将数据从本机iOS应用程序传输到在UIWebView中运行的React(非反应原生)Web应用程序.
我从本地viewcontroller获取一个字符串,需要将它“注入”一个< input>的值. React组件类中的元素.我给元素一个像这样的id：
render() {
<div>
...
<input id="iccid" type="text" name="iccid" pattern="\d*" onChange={this.iccidChanged.bind(this)} autoFocus />
...
</div>
}
然后使用iOS的JavaScriptCore(Swift代码)运行：
self.context = self.webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as? JSContext
self.context!.evaluateScript("document.getElementById('iccid').value='\(barcodeValue)';")
这似乎工作得很好,我可以看到在webview中的DOM更新的值,问题是我的React onChange函数(验证值和更改组件状态)不会触发,因为React没有将此解释为更改(可能是因为DOM与虚拟DOM处理).
解决方法
我想你想要在扫描条形码时触发事件.您的iOS应用程序可能不需要知道应该分派事件的位置(即哪个输入字段和方式).只需向Web视图发出已扫描条形码的信号即可.
您可以将自定义DOM事件调度到窗口,并让一些React组件侦听该事件.
window.dispatchEvent(new CustomEvent('barcodescan',{
detail: {
value: '(barcodeValue)'
}
}))
然后,您可以创建将侦听条形码事件的非呈现组件：
const BarcodeListener = React.createClass({
propTypes: {
onBarcodeScan: React.PropTypes.func.isrequired
},componentDidMount () {
window.addEventListener('barcodescan',this.handleBarcodeScan)
},componentWillUnmount () {
window.removeEventListener('barcodescan',render () {
return null
},handleBarcodeScan (e) {
this.props.onBarcodeScan(e)
}
})
然后,在表单中,您可以使用条形码事件侦听器呈现输入：
render () {
return (
<div>
...
<input ... />
<BarcodeListener onBarcodeScan={this.handleBarcodeScan} />
</div>
)
}
然后单独处理条形码扫描事件.
