React Native Picker确认按钮

Question

我在这里问，因为我已经研究过这个问题，似乎无法找到解决方案。我正在使用React Native Picker，但默认情况下，此选择器没有右上角的“确认”按钮，供用户在选择项目时按下。我是React Native和移动开发的新手，所以我很抱歉这是一个简单的问题，但我很困惑。有谁知道实现这个按钮的解决方案？

import React, { Component } from 'react';
import { Picker, View, Text } from 'react-native';

class ProposalPicker extends Component {
    state={proposal: ''}
    updateProposal = (proposal) => {
        this.setState({ proposal: proposal })
    }
    render() {
        return (

                <Picker selectedValue = {this.state.proposal} 
                        onValueChange = {this.updateProposal}
                        itemStyle={{ backgroundColor: 'grey' }}

                >

                    <Picker.Item label = "Test" value = "TestValue" />
                    <Picker.Item label = "Test" value = "TestValue" />
                    <Picker.Item label = "Test" value = "TestValue" />
                    <Picker.Item label = "Test" value = "TestValue" />
                    <Picker.Item label = "Test" value = "TestValue" />
                    <Picker.Item label = "Test" value = "TestValue" />
                    <Picker.Item label = "Test" value = "TestValue" />
                    <Picker.Item label = "Test" value = "TestValue" />

                </Picker>
                //<Text>{this.state.proposal}</Text>

        )
    }
}

const styles = {
    proposalPickerStyle: {
        backgroundColor: 'lightgrey'
    }
}

export default ProposalPicker;

Answer 1

添加一个新功能

handleConfirmClick(){
 //perform confirm action
}

然后在选择器下方添加一个新按钮

<button onClick={this.handleConfirmClick.bind(this)} >Confirm</button>

编辑只是注意到你正在使用ES6？）

handleConfirmClick = () => {
//perform action 
}

编辑2除非您希望此组件具有自己的生命周期，否则最好将Picker，确认Button和onChangeHandler放在父组件中