在子組件中使用TextInput創建登錄表單

Question

我是React Native的新手，我試圖實現一個簡單的登錄表單。

我嘗試以下第一，它的工作原理：

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    TextInput, 
    StyleSheet, 
} from 'react-native'; 

import TitledInput from './login-form'; 

export default class LoginForm extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { email: '', password: ''}; 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <TextInput 
      label='Email Adress' 
      placeholder='you@domain.com' 
      value={this.state.email} 
      onChangeText={(email) => this.setState({email})} 
     /> 
     </View> 
    ); 
    } 
} 

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

然後我就想叫TitledInput另一個獨立的部件拆分輸入和嘗試這種（不工作）：

LoginForm的

import React, { Component } from 'react'; 
    import { 
     View, 
     Text, 
     StyleSheet, 
    } from 'react-native'; 

    import TitledInput from './login-form'; 

    export default class LoginForm extends Component { 
     constructor(props) { 
      super(props); 
      this.state = { email: '', password: ''}; 
     } 

     render() { 
     return (
      <View style={styles.container}> 
      <TitledInput 
       label='Email Adress' 
       placeholder='you@domain.com' 
       value={this.state.email} 
       onChangeText={(email) => this.setState({email})} 
      /> 
      </View> 
     ); 
     } 
    } 

標題輸入

import React, { Component } from 'react'; 
import { View, Text, TextInput, StyleSheet } from 'react-native'; 

export default class TitledInput extends Component { 
    const { inputStyle, labelStyle, containerStyle } = styles; 

    render() { 
    return (
     <View style={container}> 
     <Text style={label}>{props.label.toUpperCase()}</Text> 
     <TextInput 
      autoCorrect={false} 
      placeholder={props.placeholder} 
      secureTextEntry={props.secureTextEntry} 
      value={props.value} 
      onChangeText={props.onChangeText} 
      style={input} 
     /> 
     </View> 
    ); 
    } 
} 

我收到一個'maximum call stack exceeded'錯誤。

我可以在互聯網上看到，當在re-render函數中調用setState時會發生此錯誤......但我不知道如何處理這種情況，我希望登錄表單知道其輸入孩子的值零件。

我想知道它是因爲我在點擊提交按鈕時使用它，還是它是整個國家的目的？

Answer 1

當您更改TiledInput中的電子郵件輸入值時，電子郵件值將傳播至LoginForm。在LoginForm由於狀態「電子郵件」更改登錄表單將重新顯示。在這種情況下，您必須使用ComponentWillReceiveProps才能獲取新的電子郵件值。

而不是這種方法，你可以在TitledInput中有另一個狀態值來保持電子郵件的值。

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    StyleSheet, 
} from 'react-native'; 

import TitledInput from './login-form'; 

export default class LoginForm extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { email: '', password: ''}; 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <TitledInput 
      label='Email Adress' 
      placeholder='you@domain.com' 
      onChangeText={(email) => this.setState({email})} 
     /> 
     </View> 
    ); 
    } 
} 

// TitledInput 
import React, { Component } from 'react'; 
import { View, Text, TextInput, StyleSheet } from 'react-native'; 

export default class TitledInput extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { text: ''}; 
    } 
    const { inputStyle, labelStyle, containerStyle } = styles; 

    handleTextChange(value){ 
    this.setState({text:value}); 
    this.props.onChangeText(value); 
    } 
    render() { 
     return (
      <View style={container}> 
       <Text style={label}>{props.label.toUpperCase()}</Text> 
       <TextInput 
        autoCorrect={false} 
        placeholder={props.placeholder} 
        secureTextEntry={props.secureTextEntry} 
        value={this.state.text} 
        onChangeText={this.handleTextChange()} 
        style={input} 
       /> 
      </View> 
     ); 
     } 
    } 

[更新]使用的onblur代替onChangeText的可以減少函數調用