使用postMessage()

时间:2017-12-05 12:55:00

标签: javascript react-native webview

我想通过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;
&#13;
&#13;

0 个答案:

没有答案