Question

所以，我创建了这个组件PickerUF，用于选择巴西州。

import React, { Component } from "react";
import { StyleSheet, Platform } from "react-native";

import { Picker } from 'native-base'

export default class PickerUF extends Component {
    constructor(props) {
        super(props);
    }

    state = {
        selectedUF: this.props.value
    };

    render() {
        const pickerItems = UFList.map(uf => {
            return (
                <Picker.Item key={uf.sigla} label={uf.sigla} value={uf.sigla} />
            );
        });

        if (Platform.OS === 'android') {
            pickerItems.unshift(<Picker.Item key='select' label="Estado" />)
        }
        return (

            <Picker
                style={[styles.field, this.props.style]}
                iosHeader="Estado"
                mode="dropdown"
                selectedValue={this.props.value}
                onValueChange={(value) => {
                    this.setState({ selectedUF: value });
                }}
            >
                {pickerItems}
            </Picker>
        );
    }
}
const UFList = [
    { sigla: 'AC', estado: 'Acre' }
    , { sigla: 'AL', estado: 'Alagoas' }
    , { sigla: 'AP', estado: 'Amapá' }
    , { sigla: 'AM', estado: 'Amazonas' }
    , { sigla: 'BA', estado: 'Bahia' }
    , { sigla: 'CE', estado: 'Ceará' }
    , { sigla: 'DF', estado: 'Distrito Federal' }
    , { sigla: 'ES', estado: 'Espírito Santo' }
    , { sigla: 'GO', estado: 'Goiás' }
    , { sigla: 'MA', estado: 'Maranhão' }
    , { sigla: 'MT', estado: 'Mato Grosso' }
    , { sigla: 'MS', estado: 'Mato Grosso do Sul' }
    , { sigla: 'MG', estado: 'Minas Gerais' }
    , { sigla: 'PA', estado: 'Pará' }
    , { sigla: 'PB', estado: 'Paraíba' }
    , { sigla: 'PR', estado: 'Paraná' }
    , { sigla: 'PE', estado: 'Pernambuco' }
    , { sigla: 'PI', estado: 'Piauí' }
    , { sigla: 'RJ', estado: 'Rio de Janeiro' }
    , { sigla: 'RN', estado: 'Rio Grande do Norte' }
    , { sigla: 'RS', estado: 'Rio Grande do Sul' }
    , { sigla: 'RO', estado: 'Rondônia' }
    , { sigla: 'RR', estado: 'Roraima' }
    , { sigla: 'SC', estado: 'Santa Catarina' }
    , { sigla: 'SP', estado: 'São Paulo' }
    , { sigla: 'SE', estado: 'Sergipe' }
    , { sigla: 'TO', estado: 'Tocantins' }
]
const styles = StyleSheet.create({
    field: {
        width: '100%'
    }
});

它以这种方式使用

<InputZipCode onLoadCEP={(cep) => {
this.setState({
        logradouro: cep.logradouro,
        bairro: cep.bairro,
        cidade: cep.cidade,
        uf: cep.uf,
    });
    this.refs.Numero._root.focus();
}} />
<PickerUF
    value={this.state.uf}
    ref={'UF'} />

在这种情况下，通过搜索邮政编码自动加载state.uf。它工作正常。

问题是我无法手动选择状态。

将PickerUF组件从selectedValue={this.props.value}更改为selectedValue={this.state.selectedUF}，我只能手动选择。

如何管理手动和编程选择？

Answer 1

我必须将组件的状态传递给表单的状态。

无法手动选择NativeBase Picker

1 个答案: