Javascript 反应本机-更改其他组件样式onPress

例如，当按2时，其他1,3,4样式将变为选中的

noselected

，而2将变为选中的

<TopNav>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.selected}>1</NavItem>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>2</NavItem>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>3</NavItem>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>4</NavItem>
</TopNav>

this.ChooseThis（）}style={style.selected}>1
this.ChooseThis（）}style={style.noselected}>2
this.ChooseThis（）}style={style.noselected}>3
this.ChooseThis（）}style={style.noselected}>4

实现这一点有几种方法。其中之一是使用父组件的状态。我不知道您的代码结构是什么，但让我们假设它是这样的：

class Nav extends React.Component {
  constructor(props) {
    super(props);
  }

  ChooseThis = () => { /* Some code*/ };

  render(){
    return (<TopNav>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.selected}>1</NavItem>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>2</NavItem>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>3</NavItem>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>4</NavItem>
    </TopNav>);
  }
}

现在我将使用函数

ChooseThis（）

来更改状态。为此，我将向他传递所选项目名称/索引/参考

  ChooseThis = (index) => {
    this.setState({ selected: index });
    /* Some other code*/
  };

最后，我将在每个项目上设置其索引/名称/参考，并在其样式上检查它是否是当前选定的项目

  render(){
    const selected = this.state.selected;
    return (<TopNav>
      <NavItem onPress={()=> this.ChooseThis(1)} style={selected == 1 ? styles.selected : styles.noselected}>1</NavItem>
      <NavItem onPress={()=> this.ChooseThis(2)} style={selected == 2 ? styles.selected : styles.noselected}>2</NavItem>
      <NavItem onPress={()=> this.ChooseThis(3)} style={selected == 3 ? styles.selected : styles.noselected}>3</NavItem>
      <NavItem onPress={()=> this.ChooseThis(4)} style={selected == 4 ? styles.selected : styles.noselected}>4</NavItem>
    </TopNav>);
  }
}

render（）{
const selected=this.state.selected；
返回(
this.ChooseThis（1）}style={selected==1？styles.selected:styles.noselected}>1
this.ChooseThis（2）}style={selected==2？style.selected:style.noselected}>2
this.ChooseThis（3）}style={selected==3？style.selected:style.noselected}>3
this.ChooseThis（4）}style={selected==4？style.selected:style.noselected}>4
);
}
}

---

这就是你所需要的。

请把你的问题说清楚。我想你是在寻求如何实施这种行为的帮助，而不是如何解决问题。在问这个问题之前，你试过什么吗？@arracso我在洞日做过这样的研究，找不到任何类似的结果。快速选项是使用状态保存当前正在选择的项目。因此，与其选择passong，还不如选择this（）。将项目名称或整数传递给他。如果你能找到答案，我会在后面发布一个完整的解释。我将

{selected==4？styles.selected:styles.noselected}

更改为

{this.state.selected==4？styles.selected:styles.noselected}

错误消失了，但什么也没有发生，单击2，2仍然没有选择

  render(){
    const selected = this.state.selected;
    return (<TopNav>
      <NavItem onPress={()=> this.ChooseThis(1)} style={selected == 1 ? styles.selected : styles.noselected}>1</NavItem>
      <NavItem onPress={()=> this.ChooseThis(2)} style={selected == 2 ? styles.selected : styles.noselected}>2</NavItem>
      <NavItem onPress={()=> this.ChooseThis(3)} style={selected == 3 ? styles.selected : styles.noselected}>3</NavItem>
      <NavItem onPress={()=> this.ChooseThis(4)} style={selected == 4 ? styles.selected : styles.noselected}>4</NavItem>
    </TopNav>);
  }
}