Get value from input field in webview to react native
Question
I want to get the user's input from a inputfield in webview and then use it in react native to change the value of "answer".
Within webview I created an inputfield with the id="data_1". I get the input data through "oninput" and save it in "answer". But I fail to "answer" into react native by using window.ReactNativeWebView.postMessage(answer);
Any ideas?
This is my code:
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;
2 answers
solution1
1 ACCPTED 2022-03-23 22:46:43
ok, I think we many things, lets do it step by step
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;
solution2
0 2022-03-23 17:11:36
I think you have an html error with the pre tag
</pre>
just remove that and put your whole <script/> before the html to be able to call it then.
And might you just want the value once the user ends writing. I would use onblur instead of oninput to avoid sending message for each key pressed, but both ways should work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.