我想通过ref更改webview内容。如果我直接写引用名称,它工作正常。但如果我写this.refs[input]
,我收到此错误:
undefined is not an object (evaluating '_this.refs[input].postMessage')
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
TextInput,
TouchableOpacity,
WebView
} from 'react-native';
import {
request,
api_url,
HTTP_201_CREATED,
} from "../actions/BaseAction";
const api_user_url = api_url + '/users/';
class Register extends Component {
state = {
email: '',
first_name: '',
last_name: '',
password: '',
confirm_password: '',
};
setErrorForm=(res)=>{
for(var input_name in res.body){
if(this.refs[input_name]){
var err_msg = res.body[input_name];
var input= input_name + '_feedback';
this.refs[input].postMessage(err_msg); // this.refs.email_feedback.postMessage(err_msg) is working
}
}
}
createUser(data){
return request
.post(api_user_url)
.type("application/json")
.accept("application/json")
.send({
email: data['email'],
first_name: data['first_name'],
last_name: data['last_name'],
password: data['password'],
confirm_password: data['confirm_password']
})
.end((err, res)=>{
if (err || res.statusCode !== HTTP_201_CREATED) {
alert(
"Please correct the errors and try again!",
);
this.setErrorForm(res);
} else {
alert(
"Your registration was successful.<br> Please verify your email address."
);
}
}
);
}
render() {
let html= `
<div id="content"></div>
<script>
document.addEventListener('message', function(e) {
document.getElementById("content").innerHTML = e.data;
});
</script>
`;
return (
<View style={styles.container}>
<View>
<TextInput
ref= {'email'}
style={styles.input}
value={this.props.email}
onChangeText={(email) => this.setState({email})}
/>
<View style={{width: 500, height: 24}}>
<WebView
source={{html : html}}
ref= {'email_feedback'}
javaScriptEnabled={true}
></WebView>
</View>
<TextInput
ref= {'first_name'}
style={styles.input}
value={this.props.first_name}
onChangeText={(first_name) => this.setState({first_name})}
/>
<View style={{width: 500, height: 24}}>
<WebView
source={{html : html}}
ref= {'first_name_feedback'}
javaScriptEnabled={true}
></WebView>
</View>
//there are others (last_name,password,confirm_password)
<TouchableOpacity onPress={()=>this.createUser(this.state)}>
<Text>Sign up</Text>
</TouchableOpacity>
</View>
);
}
}
export default Register;
&#13;