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)}
               />
            )
        }
    }

该网页具有一个id ='inpOne'的输入字段。 onMessage属性是通过在网页内单击按钮触发的。当执行onMessage属性时，如何使用上述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={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 = 'xyz@github.com';`;
    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>
    );
  }
}

从本地组件更新Web视图中的输入字段

2 个答案: