Javascript 如何获取组件的值

我想在我的Form.js中获取email和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',
        }
    });

import React，{Component}来自'React'；
进口{
键盘避免了gView，
样式表，
触控高光，
形象,，
}从“反应本机”；
从“/UserInput”导入UserInput；
从“../../images/Iconperson.png”导入用户名img；
从“../../images/Iconlock.png”导入密码img；
从“../../images/eye.png”导入eyeImg；
导出默认类窗体扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“”，
};
}  
_onPress（）{
console.warn（“email”，this.state.email）
console.warn（“密码”，this.state.password）
}  
render（）{
返回(
this.setState（{email}）}
键盘类型='电子邮件地址'
占位符='Username'
自动资本化={'none'}
returnKeyType={'done'}
自动更正={false}/>
this.setState（{password}）}
占位符=“密码”
returnKeyType={'done'}
自动资本化={'none'}
自动更正={false}/>
登录
);
}
}   
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
}
});

二,。这是我的类src/components/login/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,
    },
    });

import React，{Component，PropTypes}来自'React'；
从“维度”导入维度；
进口{
样式表，
看法
文本输入，
形象,，
}从“反应本机”；
const DEVICE_WIDTH=维度.get（'window'）.WIDTH；
const DEVICE_HEIGHT=尺寸.get（'window'）。高度；
导出默认类UserInput扩展组件{
render（）{
返回(
this.setState（{field}）}
占位符={this.props.placeholder}
secureTextEntry={this.props.secureTextEntry}
自动更正={this.props.autoCorrect}
autoCapitalize={this.props.autoCapitalize}
returnKeyType={this.props.returnKeyType}
占位符textcolor='white'
keyboardType={this.props.keyboardType}
underlineColorAndroid='transparent'/>
);
}
}
UserInput.propTypes={
ChangeText:PropTypes.string，
来源：PropTypes.number.isRequired，
占位符：PropTypes.string.isRequired，
键盘类型：PropTypes.string，
secureTextEntry:PropTypes.bool，
自动更正：PropTypes.bool，
自动资本化：PropTypes.string，
returnKeyType:PropTypes.string，
};
const styles=StyleSheet.create({
输入：{
背景颜色：“rgba（255，255，255，0.2）”，
宽度：设备_宽度-40，
身高：40，
marginHorizontal:20，
paddingLeft:45，
边界半径：20，
颜色：“#ffffff”，
},
输入包装器：{
弹性：1，
},
内联：{
位置：'绝对'，
zIndex:99，
宽度：22，
身高：22，
左：35，
排名：9，
},
});

当您在文本输入中键入时，我看到您正在尝试更改表单组件中的状态。要正确执行此操作，需要从表单组件调用setState。目前有两个函数通过道具传递：

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

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

查看在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组件：

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

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

//Form.js
render（）{
返回(
)
}

现在，当用户输入文本时，应使用以下方法：

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

导出默认类UserInput扩展组件{
render（）{
返回(
);
}
}

额外好处：您还应该在文本输入中添加属性“值”：

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

导出默认类UserInput扩展组件{
render（）{
返回(
value={this.props.textValue}
);
}
}

并确保它是从父组件传递下来的：

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

//Form.js
render（）{
返回(
)
}

当您在文本输入中键入时，我看到您正在尝试更改表单组件中的状态。要正确执行此操作，需要从表单组件调用setState。目前有两个函数通过道具传递：

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

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

查看在UserInput组件中如何使用这些字符，每当向该文本框添加新字符时，调用上面的函数。因此，当调用

this.setState（）

时，它说的是

Us