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>

编辑刚刚注意到您使用ES（6？）

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

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

反应本机选择器确认按钮

1 个答案: