如何用@ shoutem / ui DropDownMenu设置多个选择？

Question

我使用DropDownMenu并参考官方doumcn https://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu

我想设置两个DropDownMenu第一个用于区域，第二个用于城市，如果用户选择像East这样的区域，则第二个DropDownMenu应设置值E1，E2

这是我的代码：

import React, { Component } from 'react';
import { View } from 'react-native';
import { DropDownMenu, Text } from '@shoutem/ui';

class TestConfirm extends Component {

    constructor(props) {
        super(props);
        this.state = {
          zone: [
            {
              id: 0,
              brand: "North",
              models:
                {
                  model: "Audi R8",
                  image: {
                    url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Audi-R8.jpg"
                  },
                  description: "North Description"
                },
                children: [{
                    name: "N1",
                    id: 10,
                  },{
                    name: "N2",
                    id: 17,
                  }]
              },
            {
              id: 1,
              brand: "West",
              models: {
                model: "Chiron",
                image: {
                  url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Chiron.jpg"
                },
                description: "West Description"
              },
              children: [{
                name: "W1",
                id: 10,
              },{
                name: "W2",
                id: 17,
              }]
            },
            {
              id: 2,
              brand: "East",
              models: {
                model: "Dodge Viper",
                image: {
                  url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"
                },
                description: "East Description"
              },
              children: [{
                name: "E1",
                id: 10,
              },{
                name: "E2",
                id: 17,
              }]
            },
          ],
        }
      }

  render() {
    const selectedZone = this.state.selectedZone || this.state.zone[0];
    console.log('selectedZone =>');
    console.log(selectedZone);
    console.log('selectedZone.children =>');
    console.log(selectedZone.children);
    return (
      <Screen>
        <DropDownMenu
            styleName="horizontal"
            options={this.state.zone}
            selectedOption={selectedZone ? selectedZone : this.state.zone[0]}
            onOptionSelected={(zone) => this.setState({ selectedZone: zone })}
            titleProperty="brand"
            valueProperty="cars.model"
        />
        <Text styleName="md-gutter-horizontal">
            {selectedZone ?
            selectedZone.models.description :
            this.state.zone[0].models.description}
        </Text>

       <DropDownMenu
            styleName="horizontal"
            options={selectedZone.children}
            selectedOption={selectedZone ? selectedZone : this.state.zone[0].children}
            onOptionSelected={(city) => this.setState({ selectedZone: city })}
            titleProperty="name"
            valueProperty="cars.model"
        />
      </Screen>
    );
  }
}

export default TestConfirm;

这是我的屏幕看起来像这样：

如果我选择East，则会显示错误

Invalid `selectedOption` {"id":2,"brand":"East","models":{"model":"Dodge Viper","image":{"url":"https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"},"description":"East Description"},"children":[{"name":"E1","id":10},{"name":"E2","id":17}]}, DropDownMenu `selectedOption` must be a member of `options`.Check that you are using the same reference in both `options` and `selectedOption`.

我检查我的console.log将如下所示：

名称下的密钥children是我想把它放入我的第二个DropDownMenu

我不知道如何做下一步。任何帮助将不胜感激。

提前致谢。

Answer 1

selectedOption组件的

DropDownMenu属性需要单个对象，但this.state.zone[0].children是一个数组。您可以将其更改为this.state.zone[0].children[0]以解决问题。

此外，当您更改城市下拉列表时，您正在更新状态中的区域值。这会导致错误。尝试通过在状态中设置不同的值并检查城市下拉列表的值来修复它

<强>示例

render() {
    const { zone, selectedZone, selectedCity } = this.state
    return (
      <Screen>
        <DropDownMenu
            styleName="horizontal"
            options={zone}
            selectedOption={selectedZone || zone[0]}
            onOptionSelected={(zone) => 
              this.setState({ selectedZone: zone, selectedCity: zone.children[0] } )
            }
            titleProperty="brand"
            valueProperty="cars.model"
        />
        <Text styleName="md-gutter-horizontal">
            {selectedZone ?
            selectedZone.models.description :
            this.state.zone[0].models.description}
        </Text>
       <DropDownMenu
            styleName="horizontal"
            options={selectedZone ? selectedZone.children : zone[0].children } // check if zone selected or set the defaul zone children
            selectedOption={selectedCity || zone[0].children[0] } // set the selected city or default zone city children
            onOptionSelected={(city) => this.setState({ selectedCity: city })} // set the city on change
            titleProperty="name"
            valueProperty="cars.model"
        />
      </Screen>
    );
  }