ネイティブプロジェクトのiOSアプリケーションに反応するボタンが3つあります。クラスをアクティブにしてクリックされたボタンにする方法と、このクラスを他のクラスから削除する方法はありますか? jQueryで使用したaddClass/removeClassと同じですか?ボタンを押したときに元のアクティブなアクティブなクラスに反応します
0
A
答えて
2
まず、あなたのスタイルを「クラス」に定義してください。
const styles = StyleSheet.create({
btnSelected: {
...
},
notSelected : {
}
});
あなたの反応コンポーネントでは、stateプロパティを使用できます。
例:
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 })} ... />
1
React and React Nativeのキーコンセプトは、UIの状態を強制的に設定しないということです。代わりに、いくつかの状態を変更し、それに基づいてUIを宣言的にレンダリングします。
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
、と地元のコンポーネントの状態を設定します。
あなたは、たとえばローカルコンポーネントの状態(this.state
)を使用することができます。 isActive
プロパティは、this.state.activeButton
と何らかの値を比較する式に基づいて、すべてのボタンに設定されます。
関連する問題
- 1. メニューコンポーネントに「アクティブ」クラスを渡すことに反応しました
- 2. キーボードのボタンを押したときにリンクをアクティブにする
- 3. jQueryのは、アクティブな押されたボタンを作成し、アクティブでない他のすべてのボタンは
- 4. ボタンがアクティブなときにシャドウを削除します。
- 5. アニメーションとアクティブなボタン
- 6. ボタンはリスト内の要素をアクティブ/非アクティブにします(複雑なケース)
- 7. 親がアクティブなときにJqueryの子がアクティブになる
- 8. ボタンをクリックしたときにキーボードをアクティブにする方法
- 9. HTML無効ボタン:アクティブなCSS疑似クラス
- 10. キーボードのキーを押してC#ボタンをアクティブにできません
- 11. ファンデーション6 - クリックしたときにドロップダウンアイテムがアクティブにならない
- 12. Androidスタジオ:タップしたときにImageButtonがアクティブにならない
- 13. React Nativeで数回押すまでボタンが反応しない
- 14. CallContext.SetData() - スレッドがアクティブ - 非アクティブ - アクティブ(TPL)になったときに使用可能なオブジェクトですか?
- 15. 1つの要素のみアクティブにします(アクティブなもの)
- 16. スクリプトアプリがアクティブになるのに反応する方法はありますか?
- 17. フィルタリングするときにアクティブなボタンをチェックする
- 18. Angularjs:ボタンにアクティブなクラスを追加する方法
- 19. ボタンにアクティブなクラスを追加するReactJs
- 20. Boostrap 3アクティブ状態ボタン。どのようにアクティブなボタンを合計しますか?
- 21. アクティブなときにチェックボックスの背景色を変更します。
- 22. ブートストラップ付きのアクティブなボタン3
- 23. リンクにハッシュタグがある場合、アクティブなクラスをli要素に追加し、li要素をアクティブにします。
- 24. アクティブなクラスを設定するには?
- 25. タブがアクティブなときに子(孫)クラスを変更する
- 26. アクティブなクラスをメニューのセクションに追加
- 27. Backbone.js - ビューがアクティブなときにキーダウンイベントを追加しますか?
- 28. 「ログイン」ボタンを押しても反応がない
- 29. .toggleClass( 'アクティブ')他のリンクがクリックされたときにアクティブを削除しないようにする
- 30. ホームキーを押した後にボタンが応答しない