Question

我从子元素的Props（MyTextField.js）设置我的父状态（Login.js）。从子元素开始，Prop的状态表示它已设置（即用户名），但从父级的角度来看（Login.js），状态未设置。我很困惑。从MyTextField中，以下内容在change_text（text）函数

中定义

this.props.parent.state

但是从Login.js的login（）函数来看，以下是未定义的：

this.state

他们应该指向同一件事。

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）上调用 bind ，而且孩子工作得很好。

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

react-native父道具未设置

1 个答案: