Reactjs 保存状态的单个选择项（REACT-NATIVE）

我目前有4个TouchableHighlights，我的代码如下所示：

声明：

this.state={
选中：空，
selectedButton:“”
}

可触摸突出显示（除了文本外，它们都是相同的）

当前行为：每当我选择一个按钮时，所有按钮都会高亮显示，无法取消按下。 期望的行为：我希望一次只选择一个按钮，并将其状态保存在某个位置

注意：我可以通过创建包含不同标志号的4个不同函数来获得所需的行为，但是，我希望以尽可能干净的方式来完成

有什么指导吗

---

谢谢

您可以创建一个按钮文本数组，然后使用提供当前索引值的

.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));
}

render（）{
const renderHighlight=（文本，索引）=>(
{
if（this.state.selectedIndex==索引）{
//“Unpress”功能
this.setState（{selectedIndex:undefined}）；
} 
否则{
this.setState（{selectedIndex:index
}
})
style={this.state.selectedIndex===索引？
{背景颜色：{0F0:{}
>
{text}
;
);
常量按钮=[“按钮0”、“按钮1”、“按钮2”]；
返回按钮.map（（text，i）=>this.renderHighlight（text，i））；
}

您可以创建一个按钮文本数组，然后使用提供当前索引值的

.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));
}

render（）{
const renderHighlight=（文本，索引）=>(
{
if（this.state.selectedIndex==索引）{
//“Unpress”功能
this.setState（{selectedIndex:undefined}）；
} 
否则{
this.setState（{selectedIndex:index
}
})
style={this.state.selectedIndex===索引？
{背景颜色：{0F0:{}
>
{text}
;
);
常量按钮=[“按钮0”、“按钮1”、“按钮2”]；
返回按钮.map（（text，i）=>this.renderHighlight（text，i））；
}

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));
}