Question

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

请帮我解决如何在可折叠视图中管理表单。

Answer 1

如果设置defaultValue = {＆＃39;在你的form.js textinput中，当你开始输入时它不会关闭。请查看以下代码。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},
});

React Native如何使用TextInput Multiline创建可折叠表单

1 个答案: