“UI-Kitten”选择组件不呈现值答案

【问题标题】：'UI-Kitten' Select Component not rendering value“UI-Kitten”选择组件不呈现值
【发布时间】：2020-11-01 16:46:56
【问题描述】：

我正在使用带有 UI-kitten 和 formik 的 react naitve 来构建注册表单。我在formik 中使用ui kitten 的选择组件。我无法从组件中获取选定的值。它为我提供了所选项目(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>
        );
    }
}

【问题讨论】：

标签： react-native formik react-native-ui-kitten

【解决方案1】：

您应该参考文档 https://akveo.github.io/react-native-ui-kitten/docs/components/select/overview#select

select 组件没有 value 道具，它有一个 selectedIndex 道具，它将选择给定索引上的项目。

在你的情况下，你可以做这样的事情

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

根据状态值，您可以找到索引，反之亦然。这将确保 Select 始终获取索引值，并且您的状态始终具有字符串。

【讨论】：

我试过这个。但这给了我一个错误- selectedIndex.equals 不是函数。（在'selectedIndex.equals(index)'中，'selectedIndex.equals'是未定义的）
是您的代码的“selectedIndex.equals”部分还是来自库本身？
ok 找到了，你必须使用 React.useState(new IndexPath(0));检查我给的那个页面
我正在使用类组件，所以我不能使用反应钩子
但是你必须使用新的 IndexPath(0) 作为默认值

【解决方案2】：

我创建了函数“getSelectValue”来处理多选和单选。这是 UIKittenDocs 中针对 Multiselect 稍作修改的 example code，但您可以从 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,
  },
});

【讨论】：