React-Native 将文本输入值传递给另一个 js

Question

我是 react-native 的新手，所以很抱歉这种问题。

我必须实现一个可以登录我们网站的应用程序。稍后再详细说明。

第一个问题： LoginScreen.js

var Animated = require('Animated');
var Dimensions = require('Dimensions');
var Image = require('Image');
var React = require('React');
var StatusBar = require('StatusBar');
var StyleSheet = require('StyleSheet');
var View = require('View');
var {
  Text
} = require('OnTrackText');
var LoginButton = require('../common/LoginButton');
var TouchableOpacity = require('TouchableOpacity');
var TextInput = require('TextInput');
var {
  skipLogin
} = require('../actions');
var {
  connect
} = require('react-redux');
class LoginScreen extends React.Component {
  state = {
    anim: new Animated.Value(0),
    name: '',
    password: ''
  };
  componentDidMount() {
    Animated.timing(this.state.anim, {
      toValue: 3000,
      duration: 3000
    }).start();
  }
  render() {
    return ( < Image style = {
        styles.container
      }
      source = {
        require('./img/login-background.png')
      } >
      < StatusBar barStyle = "default" / >
      < TouchableOpacity accessibilityLabel = "Skip login"
      accessibilityTraits = "button"
      style = {
        styles.skip
      }
      onPress = {
        () => this.props.dispatch(skipLogin())
      } >
      < Animated.Image style = {
        this.fadeIn(2800)
      }
      source = {
        require('./img/x.png')
      }
      />
        </TouchableOpacity >
      < View style = {
        styles.section
      } >
      < Animated.Image style = {
        this.fadeIn(0)
      }
      source = {
        require('./img/ontrack-logo@3x.png')
      }
      />
        </View >
      < View style = {
        styles.section
      } >
      < Animated.Text style = {
        [styles.h1, this.fadeIn(700, -20)]
      } >
      Willkommen zur < /Animated.Text>
          <Animated.Text style={[styles.h1, {marginTop: -10}, this.fadeIn(700, 20)]}>
            OnTrack App
          </Animated.Text >
      < /View>
        <View style={styles.section}>
          <TextInput
            style={styles.input}
            onChangeText={(text) => this.setState({ name: text }) }
            value={this.state.name}
            placeholder={"Benutzername"}
            / >
      < TextInput style = {
        styles.input
      }
      onChangeText = {
        (text) => this.setState({
          password: text
        })
      }
      value = {
        this.state.password
      }
      secureTextEntry = {
        true
      }
      placeholder = {
        "Password"
      }
      />
        </View >
      < Animated.View style = {
        [styles.section, styles.last, this.fadeIn(2500, 20)]
      } >
      < LoginButton name = {
        this.state.name
      }
      password = {
        this.state.password
      }
      source = "First screen" / >
      < /Animated.View>
      </Image >
    );
  }
  fadeIn(delay, from = 0) {
    ....
  }
  const scale = Dimensions.get('window').width / 375;
  var styles = StyleSheet.create({
      ....
    }
  });
module.exports = connect()(LoginScreen);

如您所见，我想在文本输入中输入名称和密码。

比

LoginButton.js

'use strict';

const React = require('react');
const {StyleSheet} = require('react-native');

const { logInToWeb } = require('../actions');
const {connect} = require('react-redux');

class LoginButton extends React.Component {
  props: {
    style: any;
    source?: string; // For Analytics
    dispatch: (action: any) => Promise;
    onLoggedIn: ?() => void;
  };
  state: {
    isLoading: boolean;
  };
  _isMounted: boolean;

  constructor() {
    super();
    this.state = { isLoading: false };
  }

  componentDidMount() {
    this._isMounted = true;
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    if (this.state.isLoading) {
      return (
        <OnTrackButton
          style={[styles.button, this.props.style]}
          caption="Please wait..."
          onPress={() => {}}
        />
      );
    }

    return (
      <OnTrackButton
        style={[styles.button, this.props.style]}
     //   icon={require('../login/img/f-logo.png')}
        caption="Login to OnTrack"

        //   onPress={this.props.onpress}
        onPress={() => this.logIn()}
      />
    );
  }

  async logIn() {
    const {dispatch, onLoggedIn, name, password} = this.props;

    this.setState({isLoading: true});
    try {
      await Promise.race([
        dispatch(logInToWeb(name,password)),
        timeout(15000),
      ]);
    } catch (e) {
      const message = e.message || e;
      if (message !== 'Timed out' && message !== 'Canceled by user') {
        alert(message);
        console.warn(e);
      }
      return;
    } finally {
      this._isMounted && this.setState({isLoading: false});
    }

    onLoggedIn && onLoggedIn();
  }
}

async function timeout(ms: number): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('Timed out')), ms);
  });
}

var styles = StyleSheet.create({
...
});

module.exports = connect()(LoginButton);

比

./action/login.js 中的 dispatch(logInToWeb) 方法如下所示：

'use strict';

import type { Action, ThunkAction } from './types';

const Parse = require('parse/react-native');
const {Platform} = require('react-native');
const Alert = require('Alert');


function logInToWeb(data): ThunkAction {
  const {name, password} = data

      Alert.alert(
        `Hi, ${name} & ${password}`,
        'möchten Sie sich ausloggen?',
        [
          { text: 'Abbruch' },
          { text: 'Ausloggen' },
        ]
      )
  
}

function skipLogin(): Action {
  return {
    type: 'SKIPPED_LOGIN',
  };
}

function logOut(): ThunkAction {
 ...
}

function logOutWithPrompt(): ThunkAction {
 ....
}

module.exports = {logInToWeb, skipLogin, logOut, logOutWithPrompt};

所以问题是：

如何将 ButtonClick 上 LoginScreen.js 中 Textinput 的值传递给 login.js 中的 logInToWeb-Method

如何获取我在 login.js 中调用的警报中的名称和密码

就是这样。稍后我将询问有关承载身份验证和登录服务器的更多信息:)

Answer 1

我认为您要问的是如何将名称和密码发送到您的 logIn() 方法？也许这样的事情会起作用：

// Login Button
<LoginButton
  name={this.state.name}
  password={this.state.password}
  source="First screen" />

// Login method
async logIn() {
  const {dispatch, onLoggedIn, name, password} = this.props;
  this.setState({isLoading: true});
  try {
    await Promise.race([
      dispatch(logInToWebk({name, password})),
      timeout(15000),
    ]);
  }
}

然后

function logInToWebk(data): ThunkAction { 
  const { name, password } = data
  // do something with name + password
}