从iOS UIWebView更新React组件中元素的值

我正在尝试将数据从本机iOS应用程序传输到在UIWebView中运行的React(非反应原生)Web应用程序.

我从本地viewcontroller获取一个字符串,需要将其"注入"到React组件类中的元素值.我给元素id这样:

render() {

...
    
...

}

然后使用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更新元素值的正确方法/最佳实践是什么？让React组件表现得像用户输入的那样？

我想你想要在扫描条形码时触发事件.iOS应用可能并不需要知道其中的事件应该被分派(即,输入字段以及如何).只需向Web视图发出已扫描条形码的信号即可.

您可以将自定义DOM事件调度到window某个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', this.handleBarcodeScan)
  },
  render () {
    return null
  },
  handleBarcodeScan (e) {
    this.props.onBarcodeScan(e)
  }
})

然后,在表单中,您可以使用条形码事件侦听器呈现输入:

  render () {
    return (
      

        ...
        
        
      
    )
  }

然后单独处理条形码扫描事件.