如何在React Native的下拉菜单中设置默认值

时间:2019-09-30 10:19:37

标签: javascript reactjs react-native ecmascript-6

在我的数组中,我在“选项”道具中获得了5个值,但是我想设置默认值Please Select,该值是我在state中定义的。           并试图获得价值道具。但是它越来越出错。 Label of undefined           基本上,当我在下拉菜单“ Please Select”中打开页面时,该数组值应会出现。           请提出建议。 在选择字段下面,我创建了单独的组件。

<AndroidPicker
            mode="dropdown"
            iosIcon={<Icon name="chevron-down" type="MaterialCommunityIcons"/>}
            placeholder=""
            placeholderStyle={{ color: "#bfc6ea" }}
            placeholderIconColor="#007aff"
            style={{ width: '100%' }}
            selectedValue={value}
            onValueChange={(e) => onChange.bind(that, this.props, e)()}
          >
            {
              options.map((item, indx) => {
                let { label, value } = item;
                return <AndroidPicker.Item key={indx} label={label} value={value}/>;
              })
            }
          </AndroidPicker>

    this.state={
    religionValue:'Please Select'
    }

    religion: Array(5)
    0: {name: "Hindu", code: "H", __typename: "TroubleTicketMasterCode"}
    1: {name: "Christian", code: "C", __typename: "TroubleTicketMasterCode"}
    2: {name: "ISLAM", code: "I", __typename: "TroubleTicketMasterCode"}
    3: {name: "Others", code: "O", __typename: "TroubleTicketMasterCode"}
    4: {name: "Not Disclosed", code: "ND", __typename: "TroubleTicketMasterCode"}

 religionChanged = (key, val) => {
        this.handlereligionChanged({ field: "religionValue" }, val);
    };

    handlereligionChanged = (props, e) => {
        let tempObj = this.state.religionValue;
        tempObj[props.field] = e;
        this.setState({ religionValue: e });
    };

    let religionOptions = [];
            religion.map(({ code: value, name: label }) => {
                religionOptions.push({ value, label });
            });


        <SelectField
             label="Religion"
             value={this.state.religionValue}
             options={religionOptions}
             node="Religion"
             onChange={this.religionChanged}
             that={this}
             setIcon={true}
              />

1 个答案:

答案 0 :(得分:0)

使用名为SelectField的{​​{1}}属性。在react-md site

上查看文档