如何獲取組件的值本機

Question

我想獲取我的Form.js中的電子郵件和passowrd的值，以便點擊單擊按鈕可以將它們傳遞給客戶端api 1.這是我的類src/components/login /Form.js

 import React, { Component } from 'react'; 
     import { 
      KeyboardAvoidingView, 
      StyleSheet, 
      TouchableHighlight, 
      Image,   
     } from 'react-native'; 
     import UserInput from "./UserInput";  
     import usernameImg from '../../images/Iconperson.png'; 
     import passwordImg from '../../images/Iconlock.png'; 
     import eyeImg from '../../images/eye.png';  
      export default class Form extends Component {  
       constructor(props) { 
      super(props); 
      this.state = { 
        email: "", 
        password: "", 
       }; 
     } 
     _onPress() { 
      console.warn("email", this.state.email) 
      console.warn("password", this.state.password) 
     } 
      render() { 
       return (
        <KeyboardAvoidingView behavior='padding' 
        style={styles.container}> 
        <UserInput source={usernameImg} 
        onChangeText = {(email) => this.setState({email})} 
         keyboardType = 'email-address' 
         placeholder='Username' 
         autoCapitalize={'none'} 
         returnKeyType={'done'} 
         autoCorrect={false} /> 
        <UserInput source={passwordImg} 
       onChangeText = {(password) => this.setState({password})} 
         placeholder='Password' 
         returnKeyType={'done'} 
         autoCapitalize={'none'} 
         autoCorrect={false} /> 
        <TouchableHighlight 
         onPress={this._onPress} 
         activeOpacity={1} > 
         <Text>LOGIN</Text> 
        </TouchableHighlight> 
       </KeyboardAvoidingView> 

      ); 
      } 
     } 
     const styles = StyleSheet.create({ 
     container: { 
      flex: 1, 
      alignItems: 'center', 
     } 
    }); 

2.這是我班的src /組件/登錄/ UserInput.js

import React, { Component , PropTypes} from 'react'; 
    import Dimensions from 'Dimensions'; 
    import { 
    StyleSheet, 
    View, 
    TextInput, 
    Image, 
    } from 'react-native'; 
    const DEVICE_WIDTH = Dimensions.get('window').width; 
    const DEVICE_HEIGHT = Dimensions.get('window').height; 

    export default class UserInput extends Component { 
     render() { 
      return (
       <View style={styles.inputWrapper}> 
       <Image source={this.props.source} 
        style={styles.inlineImg} /> 
       <TextInput style={styles.input} 
        onChangeText = {(this.props.ChangeText) => 
        this.setState({field})} 
        placeholder={this.props.placeholder} 
        secureTextEntry={this.props.secureTextEntry} 
        autoCorrect={this.props.autoCorrect} 
        autoCapitalize={this.props.autoCapitalize} 
        returnKeyType={this.props.returnKeyType} 
        placeholderTextColor='white' 
        keyboardType ={this.props.keyboardType} 
        underlineColorAndroid='transparent' /> 
      </View> 

     ); 
     } 
    } 

    UserInput.propTypes = { 
    ChangeText : PropTypes.string, 
    source: PropTypes.number.isRequired, 
    placeholder: PropTypes.string.isRequired, 
    keyboardType : PropTypes.string, 
    secureTextEntry: PropTypes.bool, 
    autoCorrect: PropTypes.bool, 
    autoCapitalize: PropTypes.string, 
    returnKeyType: PropTypes.string, 
    }; 
    const styles = StyleSheet.create({ 
    input: { 
     backgroundColor: 'rgba(255, 255, 255, 0.2)', 
     width: DEVICE_WIDTH - 40, 
     height: 40, 
     marginHorizontal: 20, 
     paddingLeft: 45, 
     borderRadius: 20, 
     color: '#ffffff', 
    }, 
    inputWrapper: { 
     flex: 1, 
    }, 
    inlineImg: { 
     position: 'absolute', 
     zIndex: 99, 
     width: 22, 
     height: 22, 
     left: 35, 
     top: 9, 
    }, 
    }); 

Answer 1

當你在打字輸入到TextInput我看你是想改變狀態表單組件。爲了正確地執行此操作，需要從Form組件調用setState。目前正在通過道具傳下來的一對夫婦的功能：

(email) => this.setState({email}) 
// and 
(password) => this.setState({password}) 

在如何將這些在你的UserInput組件，每當有新的字符添加到文本框中使用來看，調用上面的函數。所以當調用this.setState()時，它說的是UserInput.setState()。由於我們想要更改表格中的狀態，因此我們必須將這些功能綁定到父組件。

而是直接傳遞功能的道具，讓我們添加一些用戶的方法：

export default class Form extends Component { 
    constructor(props) {} 

    _onChangeEmail(email) { 
    this.setState(Object.assign({}, state, { email })); // good practice for immutability 
    } 

    _onChangePassword(password) { 
    this.setState(Object.assign({}, state, { password })); // good practice for immutability 
    } 

    render() {} 
} 

接下來，我們需要綁定這些類方法本身。這種方式不管這些被調用，這將始終指向表單組件。這是在構造函數中最常見的做：

export default class Form extends Component { 
    constructor(props) { 
    super(props) 
    this.state = {} 

    // this is where we do the binding 
    this._onChangeEmail = this._onChangeEmail.bind(this) 
    this._onChangePassword = this._onChangePassword.bind(this) 
    } 

    _onChangeEmail(email) { /* code */} 

    _onChangePassword(password) { /* code */} 

    render() {} 
} 

現在通過道具通過這些下降到UserInput組件：

// Form.js 
render() { 
    return (
    <KeyboardAvoidingView> 
     <UserInput onChangeText={this._onChangeEmail} /> 
     <UserInput onChangeText={this._onChangePassword} /> 
    </KeyboardAvoidingView> 
) 
} 

現在應該使用這些方法，當用戶輸入文本：

export default class UserInput extends Component { 
    render() { 
    return (
     <View> 
     <Image /> 
      <TextInput onChangeText = {this.props.onChangeText} /> 
     </View> 
    ); 
    } 
} 

獎勵：你也應該屬性「值」添加到輸入法：

export default class UserInput extends Component { 
    render() { 
    return (
     <View> 
     <Image /> 
      <TextInput 
      onChangeText={this.props.onChangeText} /> 
      value={this.props.textValue} 
     </View> 
    ); 
    } 
} 

，並確保它是從父組件傳遞下去：

// Form.js 
render() { 
    return (
    <KeyboardAvoidingView> 
     <UserInput 
     onChangeText={this._onChangeEmail} 
     textValue={this.state.email}/> 
     <UserInput 
     onChangeText={this._onChangePassword} 
     textValue={this.state.password}/> 
    </KeyboardAvoidingView> 
) 
}