前提・実現したいこと
Reactでラジオボタンのようなものを作成したいと考えています。
理想とする挙動はボタンが複数あり、その中の一つをクリックするとボタンの色が変わり(色なりチェックマークなり)、次に違うボタンをクリックするとクリックしたボタンの色が変わり、先ほどクリックしたボタンはデフォルトの色に戻る、といった感じです。
クリックしたボタンの色が変わる適当なサンプルを作成したのですが、このサンプルだと、
クリックしたボタンの色は変わりますが、別のボタンをクリックしても前にクリックしたボタンの色は変化したままです。
理想とする挙動にするためにはクリックされるたびにボタン全部のstate
をfalse
にして再レンダリングし、
クリックしたものだけをtrue
にすればいいのだろうなと考えているのですがいまいち実装方法がわかりません...
サンプルからどのように修正すればラジオボタンのような挙動になるのでしょうか?
何か回答を頂けると非常に助かります<(_ _)>
コード
親コンポーネント
jsx
1import React from 'react'; 2import SizeButton from './SizeButton'; 3 4const SizeContainer = (props) => { 5 const { sizes } = props; 6 return ( 7 <div> 8 {sizes.map(size => ( 9 <SizeButton 10 key={size.id} 11 number={size.number} 12 /> 13 ))} 14 </div> 15 ); 16}; 17 18export default SizeContainer;
子コンポーネント
jsx
1import React from 'react'; 2 3export default class SizeButton extends React.Component { 4 constructor(props) { 5 super(props); 6 this.state = { 7 isClicked: false, 8 }; 9 } 10 11 handleClick() { 12 this.setState({ 13 isClicked: true, 14 }); 15 } 16 17 render() { 18 const button = this.state.isClicked 19 ? <div style={{ backgroundColor: '#C8C8C8' }}>{this.props.number}</div> 20 : <div style={{ backgroundColor: '#BA9D5F' }}>{this.props.number}</div>; 21 22 return ( 23 <div onClick={() => this.handleClick()}> 24 {button} 25 </div> 26 ); 27 } 28}
補足情報
<input type="radio">としていないのはボタンを色々とスタイリングしたいという理由もあります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/16 04:04
2018/03/16 09:17