Question

我有一个响应原生项目iOS应用程序的3个按钮。如何将类激活设置为单击按钮并从其他人中删除此类？就像我在jquery上使用的addClass / removeClass一样？

Answer 1

首先要定义你的风格＆＃34; class＆＃34;。

state = {
  btnSelected: 1
}

<Button 
    style={(this.state.btnSelected== 1)?styles.btnSelected:styles.notSelected}
    onPress={() => this.setState({ btnSelected: 1 })} ... />
<Button 
    style={(this.state.btnSelected== 2)?styles.btnSelected:styles.notSelected} ... 
    onPress={() => this.setState({ btnSelected: 2 })} .../>
<Button 
    style={(this.state.btnSelected== 3)?styles.btnSelected:styles.notSelected} 
    onPress={() => this.setState({ btnSelected: 3 })} ... />

然后您可以在react组件中使用state属性。

示例：

<ion-item>
   <ion-label primary floating>FIRST NAME </ion-label>
   <ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
 </ion-item>

 <p *ngIf="myForm.controls.firstname.errors && myForm.controls.firstname.dirty ">
 <small class="up"><i> Min 3 chars </i></small>
 </p>

Answer 2

React和React Native中的关键概念是，您不必强制设置UI的状态。相反，您可以更改某个状态，然后根据该状态声明性地呈现UI。

例如，您可以使用本地组件状态（this.state）：

  class Buttons extends React.Component {
    state = {
      activeButton: 'first'
    }

    render() {
      return (
        <View>
          <Button
            onPress={() => this.setState({ activeButton: 'first' })}
            isActive={this.state.activeButton === 'first'}
          />
          <Button
            onPress={() => this.setState({ activeButton: 'second' })}
            isActive={this.state.activeButton === 'second'}
          />
          <Button
            onPress={() => this.setState({ activeButton: 'third' })}
            isActive={this.state.activeButton === 'third'}
          />
        </View>
      )
    }
  }

onPress事件处理程序使用setState设置本地组件状态，这会导致组件立即重新呈现。然后，根据将isActive与某个值进行比较的表达式，在所有按钮上设置this.state.activeButton属性。

按下按钮时，React native添加活动类

2 个答案: