React Native - Flatlist 中的单选

Question

我正在尝试制作一个带有文本的简单按钮，如果用户点击它，它会改变它的颜色和文本。这个带有文本的按钮显示在我的 Flatlist 中，如果点击它，我现在可以更改上面的文本，但问题是我的 Flatlist 中的其他带有文本的按钮也是变化。

我的目标是更改将被点击的单个按钮。

这是我的代码。

export default class tables extends Component {
    constructor(props){
        super(props)
        this.state = {
            data: [],
            ...
            toggle: true,
        }
    }
    _onPress() {
        const newState = !this.state.toggle;
        this.setState({ toggle: newState })
    }
    render() {
        const { toggle } = this.state;
        const textValue = toggle?"Available":"Occupied";
        const buttonBg = toggle?"dodgerblue":"white";
        const textColor = toggle?"white":"black";
        return (
            <View>
                <FlatList
                ....
                renderItem = {({ item }) => 
                    <View>
                        <Text>Table No: { item.tbl_id }</Text>

                        <TouchableHighlight
                        onPress = { () => this._onPress()}>
                            <Text>{textValue}</Text>              // Button with text
                        </TouchableHighlight>

                            <View>
                                <TouchableHighlight
                                ....>
                                    <Text>DINE-IN</Text>
                                </TouchableHighlight>

                                <TouchableHighlight
                                ....
                                    <Text>TAKE-OUT</Text>
                                </TouchableHighlight> 
                            </View>
                    </View>
                }
                />
            </View>
        )
    }
}

Answer 1

toggle: true, 值必须在item 中

实际上，您的布尔值会影响数据中存在的所有项目。您的项目应如下所示：

data: [
 { itemName: 'hi', toggle: false, id: 1 },
 { itemName: 'hey', toggle: false, id: 2 },
 // others items
] 

那么，你的 onPress：

 onPress = (id) => {
    const { data } = this.state
    data.forEach((elem) => {
      elem.toggle = false
      if (elem.id === id) {
        elem.toggle = true
      }
    })
    this.setState({ data })
  }

在地图中：

<TouchableHighlightonPress = { () => this._onPress(item.id)}>
<Text>{item.toggle ? "Available" : "Occupied"}</Text>

您可以通过将item.id 存储在this.state.toggle 中来以另一种方式做到这一点，然后再做一些更简单的事情：

 onPress = (id) => {
   this.setState({ toggle: id })  
 }

<Text>{item.id === this.state.toggle ? "Occupied": "Available" }</Text>