React Native如何使用TextInput Multiline创建可折叠形式

Question

我想在React Native中创建可折叠形式。我已经尝试过，但我已经创建了，但我陷入了Textarea。当我将值放入Textarea中时，它会自动关闭。对于Textarea，我已经使用了TextInput Multiline.please检查此链接https://snack.expo.io/@jangidprashant92/test

请帮助我如何在可折叠视图中管理形式。

Answer 1

如果在您的form.js textinput中设置defaultvalue = {''}，则在您开始键入时不会关闭。在以下代码中查看。https：//snack.expo.io/rkahmfalf

import React from 'react';
import { Text,View,StyleSheet,TextInput } from 'react-native';
import styled from 'styled-components/native'; // 2.2.4

export const FormContatiner = styled.View`
flex:0.9;
padding:20px;
`;
export const InputFieldOuter = styled.View`
flex:1;
marginTop:25px;
`;
export const Label = styled.Text`
fontWeight:600;
marginBottom:8px;
fontSize:14px;
opacity:0.8;
`;
export const ChildFormContainer = styled.View`
flex:1;
flex-shrink:0;
`;

export const Hr = styled.View`
    borderBottomColor: #808080;
    borderBottomWidth: 0.5;  
`;
export const InfoMessage = styled.Text`
alignSelf:flex-end;
top:0px;
color:#808080
`;

class Form extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      inputValue:undefined,
      selectExp:'Select Exp',
      quickPitch:undefined
  };
  }
    render()
    {
        console.log(this.state);
        return (
            <ChildFormContainer>
                <InputFieldOuter style={{height:160}}>
                    <Label>Quick Pitch</Label>
                    <TextInput
                        multiline
                        numberOfLines={4}
                        style={[styles.inputField, {height: 150}]}
                        selectionColor='#808080'
                        placeholderTextColor='#808080'
                        underlineColorAndroid='transparent'
                        defaultValue={' '}
                        onSubmitEditing={() => {
                        }}
                        returnKeyType={'go'}
                        onChangeText={(value) => {
                            this.setState({
                                quickPitch: value
                            })
                        }}
                        value={this.state.quickPitch}
                    />
                </InputFieldOuter>
                <InputFieldOuter>
                    <Hr/>
                </InputFieldOuter>
                <InputFieldOuter>
                    <Label>Set Hourly Rate</Label>
                    <View style={{flex:1,flexDirection:'row'}}>
                        <View style={{flex:0.1,justifyContent:'center',alignItems:'center'}}>
                            <Text style={{fontSize:20,color:'#808080'}}>$</Text>
                        </View>
                        <View style={{flex:0.9}}>
                            <TextInput
                                multiline = {true}
                                numberOfLines = {4}
                                style={[styles.inputField]}
                                selectionColor='#808080'
                                placeholderTextColor='#808080'
                                underlineColorAndroid='transparent'
                                defaultValue={' '}
                                onSubmitEditing={() => {
                                }}
                                returnKeyType={'go'}
                                onChangeText={(value) => {
                                    this.setState({
                                        inputValue: value
                                    })
                                }}
                                value={this.state.inputValue}
                            />
                            <InfoMessage>Minimum hourly rate is $50/hr</InfoMessage>
                        </View>
                    </View>
                </InputFieldOuter>
                <InputFieldOuter>
                    <Hr />
                </InputFieldOuter>
                <InputFieldOuter>
                    <Label>Enter Your Experience</Label>
                    <TextInput
                        style={[styles.inputField]}
                        selectionColor={'#808080'}
                        placeholderTextColor={'#808080'}
                        defaultValue={' '}
                        underlineColorAndroid='transparent'
                        onSubmitEditing={() => {
                        }}
                        returnKeyType={'go'}
                        onChangeText={(value) => {
                            this.setState({
                                experience: value
                            })
                        }}
                        value={this.state.experience}
                    />
                </InputFieldOuter>

                <InputFieldOuter/>
            </ChildFormContainer>
        );
    }
}
export default Form;

export const styles = StyleSheet.create({
    inputField: {borderWidth: 1, borderColor: '#CAD0D6', padding: 10, height: 44},
});