从 webview 中的输入字段获取值以响应本机

Question

我想从 webview 中的输入字段获取用户的输入，然后在 React Native 中使用它来更改“answer”的值。

在 webview 中，我创建了一个带有 id="data_1" 的输入字段。我通过“oninput”获取输入数据并将其保存在“answer”中。但是我无法通过使用 window.ReactNativeWebView.postMessage(answer);

来“回答”到 React Native

有什么想法吗？

这是我的代码：

import { Button, StyleSheet, Text, View, TouchableOpacity } from "react-native";
import { WebView } from "react-native-webview";


class MySweetComponent extends Component {

  render() {
 const run = `
      document.body.style.backgroundColor = 'blue';
      true;`

    let answer = "I want to change after user Input"

 setTimeout(() => {
   this.webref.injectJavaScript(run); 
 }, 1000);

  return (
    <View style={{ width: 350, height: 200 }}>
      <WebView
        scalesPageToFit={false}
        ref={(r) => (this.webref = r)}
        androidHardwareAccelerationDisabled={true} // To prevent crash when opening screen
        onMessage={(event) => {
          event.nativeEvent.data;
        }}
        source={{
          html: `

 <html>

      </pre>
    <input type="text" placeholder="Enter text" id="data_1" oninput="getValue()">
    <script>
    
    function getValue() {
    let answer = document.getElementById("data_1").value;
}
     window.ReactNativeWebView.postMessage(answer);
      true;
    </script>
    </body>
  </html>
  `,
        }}
      />
      <Text>{answer}</Text>
    </View>
  );
      }
}


export default MySweetComponent;

Answer 1

我认为你的前置标签有 html 错误

</pre>

只需删除它，然后将整个 <script/> 放在 html 之前，这样就可以调用它了。

并且您可能只需要用户结束写入后的值。我会使用 onblur 而不是 oninput 来避免为每个按下的键发送消息，但两种方式都应该有效

Answer 2

ok，我想我们很多事情，让我们一步步来吧

import { useState } from 'react';
import { Button, StyleSheet, Text, View, TouchableOpacity } from "react-native";
import { WebView } from "react-native-webview";

const html = `
  <html>
  <head></head>
  <body>   
   <input id="myId" placeholder="Enter text" oninput="getValue()">
   <script>
    window.id = setInterval(() => {
      if (window.ReactNativeWebView) {
        document.body.style.backgroundColor = 'green'; 
        clearInterval(window.id);
      }
    }, 1000);
     function getValue() {
       let answer = document.getElementById("myId").value;
       window.ReactNativeWebView.postMessage(answer);              
     };
   </script>  
  </body>
  </html>
`;

const MySweetComponent = () => {
  const [answer, setAnswer] = useState("I want to change after user Input");
  return (
    <View style={{ width: 350, height: 200 }}>
      <WebView        
        onMessage={(event) => {
          console.log("EVENT-DATA:", event);
          setAnswer(event.nativeEvent.data);
        }}
        source={{html}} 
      />
      <Text>{answer}</Text>
    </View>
  );    
};


export default MySweetComponent;

从 webview 中的输入字段获取值以响应本机

Get value from input field in webview to react native

javascript

webview

react-native