Question

我对ReactNative有一些经验，但是一直在尝试用更好的文件夹结构来构建它，就像流行的样板一样。

我在routes/Login目录中有以下与此问题相关的文件：

index.js
Login.js
LoginContainer.js
styles.js（不相关，因此不包括在内）。

见下文内容（略读相关内容）。

index.js

import LoginContainer from './LoginContainer';
import Login from './Login';

export { Login };
export default LoginContainer;

LoginContainer.js

import React, { Component } from 'react';
import Login from './Login';

import { Api } from '../../lib/api/index';

class LoginContainer extends Component {
  constructor(props) {
    super(props);

    this.mounted = false;
    this.state = {
      email: '',
      password: '',
      confirmPassword: '',
      confirmPasswordVisible: false,
      inputPassword: '',
      error: null,
      loading: false,
    };
  }

  componentWillMount() {
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  componentDidMount() {
      setInterval(() => {
        this.setState({
          visible: !this.state.loading
        });
      }, 3000);
    }

  async loginSubmit(){
    console.log(this.state.email)
    console.log(this.state.password)
    this.setState({ loading: true });
    try{
      let response = await Api.auth.login(this.state.email, this.state.password)
      console.log(await response);
    }catch (err){
      console.log('error');
      console.log(err);
    }
    // this.setState({ passwordInput: '' });
    this.inputPassword.setNativeProps({text: ''});
    this.setState({ loading: false });
    console.log('AFTER')
  }

  render() {
    return (
      <Login
        updateState={this.setState.bind(this)}
        loginSubmit={this.loginSubmit.bind(this)}
        {...this.state}
      />
    );
  }
}

export default LoginContainer;

Login.js

import React, { Component } from 'react';
import { View, Text, TextInput } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Spinner from 'react-native-loading-spinner-overlay';

const Login = (props) => {

    const { updateState, signIn, createAccount, error, confirmPasswordVisible, loginSubmit, inputPassword } = props;

    return (
      <View style={{margin: 128}}>
        <Spinner visible={props.loading} textStyle={{color: "#FFF"}} />
        <Text onPress={Actions.Login}>This is PageOne!</Text>
        <TextInput
          style={{height: 40}}
          placeholder="Email here"
          onChangeText={(email) => updateState({ email })}
        />
        <TextInput
          style={{height: 40}}
          placeholder="Password here"
          secureTextEntry={true}
          ref={component => inputPassword = component}
          onChangeText={(password) => updateState({ password })}
        />
        <Text onPress={loginSubmit} >LOGIN</Text>
      </View>
    )
}

Login.propTypes = {
  updateState: React.PropTypes.func,
  loginSubmit: React.PropTypes.func,
  signIn: React.PropTypes.func,
  createAccount: React.PropTypes.func,
  inputPassword: React.PropTypes.string,
  error: React.PropTypes.string,
  confirmPasswordVisible: React.PropTypes.bool,
};

export default Login;

提取我的大多数功能都很完美，与州合作也按预期工作。

我正在尝试克服清除密码字段所需的问题。 React Native支持文档显示了这个@ https://facebook.github.io/react-native/docs/direct-manipulation.html

的简单示例

在Login.js（查看）我有

1）定义了字符串inputPassword: React.PropTypes.string,

2）从const检索到props。

3）尝试使用更新状态this.setState({ passwordInput: '' });

更新它

4.。）也尝试按照此this.inputPassword.setNativeProps({text: ''});链接直接更新它，也没有Joy。

我认为我只是接近它错了，非常希望有人帮助我：D

Answer 1

您应该使用#include<stdio.h> #include<string.h> #include<stdlib.h> int main() { FILE *pdb; pdb=fopen("5an3.pdb", "r"); if(feof(pdb)) { fprintf(stderr,"File reading error!!! Probably your PDB file doesn't contain anything or poorly formatted\n"); return 0; } char test[255]; while(!feof(pdb)) { fgets(test, 255, (FILE*)pdb); char check[10]; strncpy(check,test,4); if(strcmp(check,"ATOM")==0) { char resname[3]; strncpy(resname,&test[17],3); if((strstr(resname,"THR"))||(strstr(resname,"TYR"))||(strstr(resname,"PHE"))||(strstr(resname,"TRP"))) { printf("%s\n",test); } else { printf("No Aromatic Residues Found!!! Better luck next time!!!\n"); return 0; } } } fclose(pdb); return 0; }上的defaultValue属性，并使用TextInput组件的道具为其设置默认值''：

Login

这应该从您指定<TextInput style={{height: 40}} placeholder="Password here" secureTextEntry={true} defaultValue={props.inputPassword} ref={component => inputPassword = component} onChangeText={(password) => updateState({ password })} />的容器传递到Login组件，但值得调试：

{...this.state}

我还注意到<Login updateState={this.setState.bind(this)} loginSubmit={this.loginSubmit.bind(this)} {...this.state} />被注释掉，属性名称被颠倒了 - 您可能打算使用this.setState({ passwordInput: '' });？

Answer 2

经过一段时间的游戏，我似乎已经设法让它工作，我使用了这个例子，但不在this下

如下......

_textInput.setNativeProps({text: ''});

带

ref={component => this._textInput = component}

带有分隔代码的ReactNative Clear Text Input＆amp;视图

2 个答案: