Question

我是本机新手。我尝试创建一组类似于单选按钮的按钮。
ButtonsGroup正确显示，但是我从App.js中获取了不正确的selectedIndex。当我选择第二个按钮时，我选择的是索引0而不是1。

ButtonsGroup .js

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

export default class ButtonsGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: this.props.selectedIndex,
      buttons: this.props.buttons,
    };
  }

  _updateIndex = index => {
    this.setState({selectedIndex: index});
    this.props.onPress(this.state.selectedIndex);
  };

  _renderButtons() {
    const buttons = this.state.buttons.map((title, index) => {
      return (
        <View
          key={index}
          style={{
            height: this.props.height,
            backgroundColor: 'transparent',
            flex: 1,
            borderRadius: 18,
            elevation: 2,
            marginRight: index < this.state.buttons.length - 1 ? 10 : 0,
          }}>
          <TouchableNativeFeedback
            background={TouchableNativeFeedback.Ripple('dark', true)}
            onPress={() => this._updateIndex(index)}>
            <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor:
                  this.state.selectedIndex == index ? '#2566d4' : 'white',
              }}>
              <Text
                style={{
                  color: this.state.selectedIndex == index ? 'white' : 'black',
                }}>
                {title}
              </Text>
            </View>
          </TouchableNativeFeedback>
        </View>
      );
    });

    return buttons;
  }

  render() {
    console.log(this.props);
    return (
      <View style={{...this.props.style, flexDirection: 'row'}}>
        {this._renderButtons()}
      </View>
    );
  }
}

App.js

import React, {Component} from 'react';
import {View} from 'react-native';
import ButtonsGroup from './components/ButtonsGroup';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0,
    };
    this._updateIndex = this._updateIndex.bind(this);
  }

  _updateIndex(selectedIndex) {
    this.setState({selectedIndex:selectedIndex});
  }

  render() {
    const {selectedIndex} = this.state;
    return (
        <View>
          <ButtonsGroup
            onPress={this._updateIndex}
            buttons={['button1', 'button2']}
            selectedIndex={selectedIndex}
            height={38}
            style={{margin: 10}}
          />
        </View>
    );
  }
}

不要从“ react-native-elements”中提供GroupButton。

Answer 1

您正在立即使用this.state.selectedIndex

_updateIndex = index => {
  this.setState({selectedIndex: index});
  this.props.onPress(this.state.selectedIndex);
};

您应该使用

_updateIndex = index => {
    this.setState({selectedIndex: index});
    this.props.onPress(index);
 };

无法获得正确的状态值

1 个答案: