android - 在 react native 中选择下拉项时显示文本输入字段

Question

我想显示在 react native 中选择下拉项时应显示的文本输入字段

我使用简单的逻辑。我尝试将所选值传递给函数，但未找到所选项目

export class ThirdPage extends Component{

    static navigationOptions ={
        title:"Register",
        header:null
    }; 


state = {
    //   user:'',
        username: '',
        phn: '',
        address:'',
        password:'',
    //   isLoggingIn: false,
        text:''

     };

     displayacoountForm = (text)=>{

        if({text} === "user"){
            return <TextInput style={[styles.input]}
               placeholder="Enter your phone number"
               //    underlineColorAndroid="transparent"
               numberOfLines = {1}
               onChangeText={(phn) => this.setState({ phn })}
           />
           }
        if({text} === "doctor"){

           return <TextInput style={[styles.input]}
               placeholder="Enter your password"
               secureTextEntry={true}
               //    underlineColorAndroid="transparent"
               numberOfLines = {1}
               onChangeText={(password) => this.setState({ password })}
           />
           }
           if({text} === "clinic"){
               <TextInput style={[styles.input]}
               placeholder="Enter your phone clinic"
               //    underlineColorAndroid="transparent"
               numberOfLines = {1}
               onChangeText={(phn) => this.setState({ phn })}
           />
           }


        }    




     render(){

    const data = [["user", "doctor", "clinic"]];

        return(

            <View style={[styles.wholecontainer,styles.verticalFlex,styles.backgroundColor1]}>             
              <Image
                        style={[styles.container1,styles.backgroundColor1,styles.position1]}
                        source={require('Finalapp/Images/createacc.png')}
                        />
                        <Text style={[styles.headText,styles.position2]}>Create Your Account</Text>
              <ScrollView style={[styles.backgroundColor1]}>              
              <View style={[styles.container2]}>

                        <TextInput style={[styles.input]}
                        placeholder="Enter your Name"
                        //    underlineColorAndroid="transparent"
                            numberOfLines = {1}
                            onChangeText={(username) => this.setState({ username })}
                        />

                        <TextInput style={[styles.input]}
                        placeholder="Enter your address"
                        //    underlineColorAndroid="transparent"
                            numberOfLines = {1}
                            onChangeText={(address) => this.setState({address})}
                        />

                        <TextInput style={[styles.input]}
                        placeholder="Enter your phone number"
                        //    underlineColorAndroid="transparent"
                            numberOfLines = {1}
                            onChangeText={(phn) => this.setState({ phn })}
                        />

                        <TextInput style={[styles.input]}
                        placeholder="Enter your password"
                        secureTextEntry={true}
                        //    underlineColorAndroid="transparent"
                            numberOfLines = {1}
                            onChangeText={(password) => this.setState({ password })}
                        />
                        <View style={[styles.container3]}>              
                          <DropdownMenu
                        //    style={[styles.container4]}
                            bgColor={'white'}
                            tintColor={'#666666'}
                            activityTintColor={'green'}
                            // arrowImg={}      
                            // checkImage={}   
                            // optionTextStyle={{color: '#333333'}}
                            // titleStyle={{color: '#333333'}} 
                            // maxHeight={300} 

                            handler={(selection, row) =>  this.setState({text: data[selection][row]})}
                            data={data}
                            >     

                            <View style={[styles.backgroundColor1]}> 


                                {this.displayacoountForm({this.state.text})}

                            </View>
                        </DropdownMenu>

                        </View>                        
                        <View style={[styles.button2]}>
                    <Button
                //    class="button"               
                    onPress={()=>this.props.navigation.navigate('Login')}
                    title="Submit"
                    color="#29468f"                    
                    />
                </View>            
                    </View>                             
                 </ScrollView>
            </View>           
        )};
}

标签： androidreactjsreact-nativemobile-development

Answer 1

问题是您没有将参数正确发送到displayacoountForm.

改变这个

<View style={[styles.backgroundColor1]}>
   {this.displayacoountForm({this.state.text})}
</View>

至

<View style={[styles.backgroundColor1]}>
   {this.displayacoountForm(this.state.text)}
</View>

并用这个替换你的displayacoountForm函数。

  displayacoountForm = (text) => {
    switch (text) {
      case 'user':
        return (
          <TextInput
            style={[styles.input]}
            placeholder="Enter your phone number"
            //    underlineColorAndroid="transparent"
            numberOfLines={1}
            onChangeText={phn => this.setState({ phn })}
          />
        );
      case 'doctor':
        return (
          <TextInput
            style={[styles.input]}
            placeholder="Enter your password"
            secureTextEntry
            //    underlineColorAndroid="transparent"
            numberOfLines={1}
            onChangeText={password => this.setState({ password })}
          />
        );
      case 'clinic':
        return (
          <TextInput
            style={[styles.input]}
            placeholder="Enter your phone clinic"
            //    underlineColorAndroid="transparent"
            numberOfLines={1}
            onChangeText={phn => this.setState({ phn })}
          />
        );
      default:
        return undefined;
    }
  };