从React-Native组件中更新WebView中的输入字段

Question

我有一个像这样的WebView组件：

export default class Home extends React.Component {
        onMessage(m) {
            //Update an input field in the webview with a custom value
        }
        render(){
            let jsCode = '';
            return (
            <WebView
               ref={(webView) => { this.webView.ref = webView; }}
               injectedJavaScript={jsCode}
               url={this.state.url}
               onMessage={m => this.onMessage(m)}
               />
            )
        }
    }

该网页的输入字段='inpone'。通过单击网页内的按钮触发OnMessage Prop。执行Onmessage Prop时，如何使用上述ID更新输入字段？

剥离了大部分代码。

Answer 1

可能喜欢这样。

export default class Home extends React.Component {
        onMessage(m) {
            const js = `document.getElementById('inpOne').value = ${m};`
            this.webView.injectJavaScript(js);
        }
}

另外，请检查您的WebView的Ref Prop定义。看起来不正确。应该是ref={ref => (this.webView = ref)}

Answer 2

这是如何从react Native

更改WebWiew内部HTML的完整代码

import React, { Component } from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import { WebView } from 'react-native-webview';
export default class Sample extends Component {
  constructor(props) {
    super(props);
  }
  sendDataFromReactNativeToWebView() {
    let injectedData = `document.getElementById("login_field").value = '[e-mail]';`;
    this.webView.injectJavaScript(injectedData);
  }
  render() {
    return (
      <View style={{ flex: 1, marginTop: 30 }}>
        <TouchableHighlight style={{ padding: 10, backgroundColor: 'gray', marginTop: 20 }} onPress={() => this.sendDataFromReactNativeToWebView()}>
          <Text style={{ color: 'white' }}>Send Data To WebView from React Native</Text>
        </TouchableHighlight>
        <WebView
          style={{ flex: 1 }}
          source={{ uri: 'https://github.com/login' }}
          ref={(webView) => this.webView = webView}
        />
      </View>
    );
  }
}