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

아래와 같이 시도합니다. 목표는 각각의 입력을 신뢰할 수있는 단일 값을 사용하는 것입니다.

본질적으로 두 개의 라디오 필드를 사용하여 부울 값을 보유합니다.

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> 
        ); 
       } 
   }