0

登録フォームを作成するために、UI-kittenreact naitve を使用しています。insideformikの select コンポーネントを使用しています。コンポーネントから選択した値を取得できませんでした。選択したアイテムのインデックスが表示され、選択したアイテムがフィールドに表示されません。入力とコンポーネントで正常に動作します。ui kittenformik(in console.warn())datePicker

    const formSchema = yup.object({
    name: yup.string().required("*Full Name is required"),
    gender: yup.string().required("*Gender is required"),
    dob: yup.string().required("*Date of birth is required"),})

    export default class Registration extends Component {
    render() {
        return (
            <Formik
                validationSchema={formSchema}
                initialValues={{
                    name: '',
                    gender: '',
                    dob: '',
                }}
                onSubmit={(values) => {
                    console.log(values)
                }}
            >
                {(props) => (

                    <ScrollView style={styles.containerStyle}>
                        <LinearGradient style={{ height: '100%' }}
                            colors={["#0C1248", "#D03737"]}>
                            <ScrollView contentContainerStyle={styles.scrollViewStyle}>
                                <Text style={styles.textStyle} category='h2'>Registration</Text>
                                <Input
                                    style={styles.inputView}
                                    value={props.values.name}
                                    status='primary'
                                    placeholder="Full Name"
                                    onChangeText={props.handleChange('name')}
                                />

                                <Text style={styles.errorText}>{props.touched.name && props.errors.name}</Text>

                                <Datepicker
                                    style={styles.inputView}
                                    date={props.values.dob}
                                    placeholder="Date of birth"
                                    onSelect={(dob) => { props.setFieldValue('dob', dob) }}
                                />

                                <Text style={styles.errorText}>{props.touched.dob && props.errors.dob}</Text>

                                <Select
                                    style={styles.inputView}
                                    value={props.values.gender}
                                    placeholder='Gender'
                                    onSelect={item => props.setFieldValue(
                                       'gender', item.value
                                    )}
                                >
                                    <SelectItem title='Male' />
                                    <SelectItem title='Female' />
                                </Select>

                              

                                <TouchableOpacity style={{ alignItems: "center", justifyContent: 'center' }}>
                                    <LinearGradient style={{ width: width / 1.25, padding: 12, borderRadius: 30 }}
                                        colors={["#D03737", "#0C1248"]}>
                                        <Text style={{ color: "white", textAlign: "center" }} onPress={props.handleSubmit}>Next</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                            </ScrollView>
                        </LinearGradient>
                    </ScrollView>

                )}
            </Formik>
        );
    }
}
4

2 に答える 2

0

複数選択と単一選択でこれを処理する関数「getSelectValue」を作成しました。以下は、UIKittenDocs の Multiselect 用のコード例を少し変更したものですが、Singleselect の Select コンポーネントからプロパティを削除するだけです。

import React from 'react';
import { StyleSheet } from 'react-native';
import { IndexPath, Layout, Select, SelectItem } from '@ui-kitten/components';

export const TAGS = [
  'Handwerk',
  'Bio',
  'Vegetarisch',
  'Vegan',
  'Glutenfrei',
  'Laktosefrei',
  'Natürlich'
];

function getSelectValue(selectedIndexPaths, options) {
  if (selectedIndexPaths.length) {
    // multiSelect
    return selectedIndexPaths
    .map((indexPath) => options[indexPath.row])
    .join(', ');
  } else {
    // singleSelect
    return options[selectedIndexPaths.row]
  }
}

export const SelectMultiSelectShowcase = () => {

  const [selectedTags, setSelectedTags] = React.useState([
    new IndexPath(0),
    new IndexPath(1),
  ]);

  return (
    <Layout style={styles.container} level='1'>
      <Select
        value={getSelectValue(selectedTags, TAGS)}
        multiSelect
        selectedIndex={selectedTags}
        onSelect={setSelectedTags}
      >
        {TAGS.map((tag, index) => 
          <SelectItem key={index} title={tag} />
        )}
      </Select>
    </Layout>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 128,
  },
});
于 2021-11-07T16:57:43.797 に答える