未设置本机亲本道具

Question

I am setting my parent state (Login.js) from a child element's Props (MyTextField.js). From the child-element, the Prop's state says it is set (ie username), but from the parent's perspective (Login.js), the state is not set. I'm very confused. From MyTextField, the following is defined in the change_text(text) function

this.props.parent.state

But from Login.js 's login() function, the following is undefined:

this.state

they should be pointing to the same thing.

MyTextField.js

export default class MyTextField extends Component 
{
  constructor(props) 
  {
    super(props);
    this.state                  = {text: props.text, style:styles.unfocused};
    this.state[this.props.name] = '';
  }

  change_text(text)
  {
    this.setState({text:text});
    if(this.props.parent && this.props.name)
    {
      this.props.parent.state[this.props.name] = text;
    }
    else
      console.log('no parent or name');
  }

render() 
{
return (        
<TextInput style={this.state.style} multiline={false} maxLength={100} onFocus={() => this.setState({style:styles.focused}) } onBlur={() => this.setState({style:styles.unfocused}) } onChangeText={(text) => this.change_text(text)} value={this.state.text} placeholder={this.props.placeholder}
/>)
}
}


MyTextField.propTypes = 
{
  text:         React.PropTypes.string,
  parent:       React.PropTypes.object,
  name:         React.PropTypes.string
};

Login.js

import React, { Component, PropTypes } from 'react';
    import { View, Text, Button, TextInput,TouchableHighlight,StatusBar,StyleSheet } from 'react-native';

import MyButton    from './MyButton';
import MyTextField from './MyTextField';

export default class Login extends Component 
{
  constructor(props)
  {
    super(props);
    this.state =
    {
      username:'',
      password:'',
    };
  }

  login()
  {
    console.log('login',JSON.stringify(this.state,null,2));
  }
render()       
{
 return (
 <View style={{flex: 1,flexDirection: 'column',justifyContent: 'space-between',margin:10}}>
  <View style={{backgroundColor: 'powderblue'}} />
  <MyTextField name='username' placeholder="User Name" parent={this} />
  <MyTextField name='password' placeholder="Password"  parent={this} />
  <MyButton onPress={this.login} title='Login'/>
  </View>
  );
 }
}

Answer 1

之所以可以从孩子（MyTextInput.js）而不是从Login.js访问父级的状态（Login.js），是因为我需要将 Login.js的登录功能绑定到自身（为什么我不知道），因为我从未在孩子（MyTextInput.js）上调用绑定 ，所以孩子工作得很好。

this.login = this.login.bind(this);