Отдельный элемент выбора, который сохраняет состояние (РЕАКТ-НАТИВНЫЙ) - PullRequest
Новая
       5

Отдельный элемент выбора, который сохраняет состояние (РЕАКТ-НАТИВНЫЙ)

0 голосов
/ 24 марта 2020

В настоящее время у меня есть 4 TouchableHighlights, и мой код выглядит следующим образом:

состояние: 

      this.state = {
                    selected: null,
                    selectedButton: ''
                   }

Touchable Highlight (они все одинаковы, кроме текста) 

 <TouchableHighlight
                    onPress={this.selectedButton}
                    underlayColor='blue
                    style={[styles.box, { backgroundColor: (this.state.selected === true ? 'red' : 'blue') }]}>
                    <Text>1</Text>
                </TouchableHighlight>

мои функции: 

  selectedButton = () => {
        this._handlePress('flag', '1')
        this.setState({
            selected: true,
        });
    };

_handlePress(flag, button) {
    if (flag == 1) {
        this.setState({ selected: true });
    }
    this.setState({ SelectedButton: button })
}

Текущее поведение: всякий раз, когда я выбираю одну кнопку, все становятся выделенными и не могут быть нажаты. Желаемое поведение: я хочу, чтобы за один раз была выбрана только одна кнопка с сохранением ее состояния где-то.

Примечание: я мог бы получить желаемое поведение, создав 4 разные функции, которые содержат другой номер флага, однако я Хотелось бы сделать это самым чистым способом.

Любое руководство, пожалуйста?

Спасибо

1 Ответ

2 голосов
/ 24 марта 2020

Вы можете создать массив текстов кнопок, а затем использовать .map(), который предоставляет текущее значение индекса, для их просмотра. Например: 

render() {
    const renderHighlight = (text, index) => (
        <TouchableHighlight 
            onPress={() => {
                if(this.state.selectedIndex === index) {
                    // "Unpress" functionality
                    this.setState({selectedIndex: undefined});
                } 
                else {
                    this.setState({selectedIndex: index
                }
            })
            style={this.state.selectedIndex === index ? 
                {backgroundColor: "#0F0" : {}}
        >
            <Text>{text}</Text>
        </TouchableHighlight>;
    );

    const buttons = ["button 0", "button 1", "button 2"];

    return buttons.map((text, i) => this.renderHighlight(text, i));
}
...