ReactJSのこのラジオトグルコンポーネントを書き込むためのよりきれいな方法がありますか

Question

基本的には、ラジオトグルボタンが選択またはチェックされているときにクラス名を追加します。私は以下のことをしてきましたが、私は本質的に同じことを二度書いているようです。同じ機能を持つこのコンポーネントを書くために、より短い/よりクリーンな方法がありますか？

import React from 'react'; 
import classnames from 'classnames'; 

class RadioToggle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: 'yes', 
     value2: 'no', 
     isNo: false, 
     isYes: false, 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    this.handleClick2 = this.handleClick2.bind(this); 
    } 

    handleClick(e) { 
    this.setState({ 
     value: e.target.value, 
     isYes: true, 
     isNo: false 
    }); 
    } 

    handleClick2(e) { 
    this.setState({ 
     value2: e.target.value2, 
     isNo: true, 
     isYes: false 
    }); 
    } 

    render() { 
    let classes = classnames('radioButton', {active: this.state.value && this.state.isYes == true ? 'selected' : null}); 
    let classes2 = classnames('radioButton', {active: !this.state.value2 && this.state.isNo == true ? 'selected' : null}) 
    return (
     <div> 
     <input className={classes} type="radio" name="yesno" value={this.state.value} onChange={this.handleClick}/>Yes 
     <input className={classes2} type="radio" name="yesno" value={this.state.value2} onChange={this.handleClick2}/>No 
     </div> 
     ); 
    } 
} 

export default RadioToggle; 

Answer 1

私は以下のようなものを試します。目標は、各入力の信頼できるベースとなる単一の値を使用することです。

本質的に、2つの無線フィールドを使用してブール値を保持しています。

あなたは、このコンポーネントを構築し続けると考えるべきいくつかの質問：

1. は常に必要な値はありますか？常にtrueまたはfalseのいずれかになりますか？または空白にすることができますか/ undefined？

2. 代わりにチェックボックスを使用できますか？チェックボックスは、trueまたはfalseのような状況に適しています。

   import React from 'react'; 
   import classnames from 'classnames'; 
   
   class RadioToggle extends React.Component { 
       constructor(props) { 
       super(props); 
       this.state = { 
        value: undefined 
       }; 
       } 
   
       handleClick(e, value) { 
       this.setState({ 
        value: value 
       }); 
       } 
   
       render() { 
       return (
        <div> 
        <input 
         className={classnames('radioButton', {active: this.state.value === true})} 
         type="radio" 
         name="yesno" 
         value={this.state.value === true} 
         onChange={this.handleClick.bind(this, true)} 
        /> 
        Yes 
   
        <input 
         className={classnames('radioButton', {active: this.state.value === false})} 
         type="radio" 
         name="yesno" 
         value={this.state.value === false} 
         onChange={this.handleClick.bind(this, false)} 
        /> 
        No 
        </div> 
        ); 
       } 
   }