reactjs의 한 구성 요소에서 여러 라디오 버튼 그룹을 처리하는 방법은 무엇입니까?

Question

I 버튼을 보낼 클릭에 여러 개의 라디오 버튼 그룹에서 선택한 라디오 버튼 ID의 목록을 보내려고 해요,

내 문제 : 그때 내가 변화 할 수 있어야한다, 백엔드에서 선택 라디오 버튼을 얻고있다 라디오 버튼을 클릭하고 백엔드로 다시 보냅니다. 하지만 라디오 버튼을 변경하려고하면 작동하지 않습니다. 내가 이해하지 못했다 무엇

: 이 (가) 변경 기능에, 일반적으로 변화에 우리가 상태를 변경할 수 있지만, 우리는 값 라디오 버튼을 잡아해야 부하 상태를 변경하는 처리 방법. 마침내 나는 앞으로 어떻게 움직이는 지 이해하지 못하고 여기에 맞았다. 현재 확인 상태의 사용자가 설정하는 때문에

function CardsList(props) { 
 
    const cards = props.cards; 
 
    return (
 
    <div> 
 
     {cards.map((card, idx) => (
 
     <div> 
 
     {card.cardName} 
 
      { 
 
      card.options.map((lo,idx) => (
 
       <li key={idx}> 
 
       <input 
 
       className="default" 
 
       type="radio" 
 
       name={card.cardName} 
 
       checked={lo.selected} 
 
      />)) 
 
      } 
 
     <div> 
 
     ))} 
 
    </div> 
 
); 
 
} 
 
//array of cards coming from the backend 
 
const cards = [ 
 
{cardName:'card1',options:[{radioName:'card1-radio1',selected:'true'}, 
 
          {radioName:'card1-radio2',selected:'false'}]}, 
 
    {cardName:'card2',options:[{radioName:'card2-radio1',selected:'true'}, 
 
          {radioName:'card2-radio2',selected:'false'}]} 
 
]; 
 
ReactDOM.render(
 
    <CardsList cards={cards} />, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 1

당신이 그들을 변경할 수없는 이유는 다음과 같습니다

는 와이어 프레임 및 코드 조각입니다 여기 :

<input 
    className="default" 
    type="radio" 
    name={card.cardName} 
    checked={lo.selected} 
/> 

이 정확한 시나리오에 사용한 방법은 구성 요소의 상태 (서버에서)를 내 구성 요소 상태 (this.state)에 저장하고 상태를 구성 요소에 전달하여 checked={this.state.isChecked}, 요소 상태 인 onClick을 업데이트하는 것입니다.

예 :

class CardsList extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {isChecked: false}; 
    this.inputOnClick = this.inputOnClick.bind(this); 
    } 
    //fetch data from server 
    fetchData(){ 
    fetch('/api') 
     .then(res => res.json()) 
     //this will be our initial state 
     .then(res => this.setState(res)) 
    } 
    componentDidMount(){ 
    this.fetchData(); 
    } 
    //change radio button state on click 
    inputOnClick(e){ 
    e.preventDefault(); 
    //invert state value 
    this.setState((prevState, props) => {isChecked: !prevState.isChecked}); 
    } 
    render(){ 
    return (
     <input 
     type="radio" 
     checked={this.state.isChecked} 
     onClick={this.inputOnClick} 
     /> 
    ) 
    } 
} 

이 대답은 하나의 라디오 버튼 그룹으로 작동 할 수 있지만 당신은 카드의 배열을 참조 groups.if 내가 여러 라디오 버튼 에 여러 라디오 버튼과 문제에 직면하고있다 , 그것이 속한 라디오 버튼 그룹을 어떻게 알 수 있습니까?

라디오 버튼의 이름을 기반으로 상태를 수정할 수 있습니다.

모든 카드를 구성 요소의 상태로 저장해 봅시다. 카드가 서버에서 검색되어 setState을 사용하여 저장된다는 것을 알고 있지만 시각적 목적으로이 카드를 씁니다.

this.state = {cards: [ 
    { cardName:'card1', 
    options:[ 
    {radioName:'card1-radio1',selected:true}, 
    {radioName:'card1-radio2',selected:false} 
    ] 
    }, 
    { cardName:'card2', 
    options:[ 
     {radioName:'card2-radio1',selected:true}, 
     {radioName:'card2-radio2',selected:false} 
    ] 
    } 
]} 

이제 라디오 버튼을 클릭하면 해당 라디오 버튼의 이름을 사용하여 업데이트해야 할 상태를 업데이트합니다. React 상태는 불변 일 필요가 있기 때문에, 우리는 상태의 깊은 복사본을 만들고, 그것을 수정 한 다음, 상태를 설정합니다.

inputOnClick(e){ 
    e.preventDefault(); 
    var thisRadioBtn = e.target.name; 
    //make a deep copy of the state 
    const stateCopy = JSON.parse(JSON.stringify(this.state.cards)); 
    //go through state copy and update it 
    stateCopy.forEach(card => { 
    card.options.forEach(option => { 
     if(option.radioName === thisRadioBtn){ 
     //invert value 
     //make sure the values are booleans 
     option.selected = !option.selected; 
     } 
    }); 
    }); 
    //update the components state 
    this.setState({cards: stateCopy}); 
} 

Answer 2

개체를 키로 사용하는 조회 테이블로 개체를 사용할 수 있습니다.
각 변경시 관련 옵션을 사용하여 관련 그룹을 찾고 이에 따라 새 상태를 설정해야합니다.

중요! - 여기서 주목해야 할 것은 selected 속성의 유형을 String에서 Boolean으로 변경 한 것입니다.

<input checked={option.selected} /> 

당신이 Boolean으로 변경할 수없는 경우 다음과 같은 조건을 처리해야합니다 : 여기

<input checked={option.selected === 'true'} /> 

가 실행 예입니다이 날이 같은 조건을 처리하게됩니다 :

//array of cards coming from the backend 
 
const data = [ 
 
    { 
 
    cardName: 'card1', options: [{ radioName: 'card1-radio1', selected: true }, 
 
    { radioName: 'card1-radio2', selected: false }] 
 
    }, 
 
    { 
 
    cardName: 'card2', options: [{ radioName: 'card2-radio1', selected: true }, 
 
    { radioName: 'card2-radio2', selected: false }] 
 
    } 
 
]; 
 

 

 
class CardsList extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     cards: [] 
 
    }; 
 
    } 
 

 
    componentDidMount() { 
 
    setTimeout(() => { 
 
     // mimic an async server call 
 
     this.setState({ cards: data }); 
 
    }, 1000); 
 
    } 
 

 
    onInputChange = ({ target }) => { 
 
    const { cards } = this.state; 
 
    const nexState = cards.map(card => { 
 
     if (card.cardName !== target.name) return card; 
 
     return { 
 
     ...card, 
 
     options: card.options.map(opt => { 
 
      const checked = opt.radioName === target.value; 
 
      return { 
 
      ...opt, 
 
      selected: checked 
 
      } 
 
     }) 
 
     } 
 
    }); 
 
    this.setState({ cards: nexState }) 
 
    } 
 

 
    onSubmit =() => { console.log(this.state.cards) }; 
 

 
    render() { 
 
    const { cards } = this.state; 
 
    return (
 
     <div> 
 
     { 
 
      cards.length < 1 ? "Loading..." : 
 
      <div> 
 
       {cards.map((card, idx) => (
 
       <ul> 
 
        {card.cardName} 
 
        { 
 
        card.options.map((lo, idx) => { 
 
         return <input 
 
         key={idx} 
 
         type="radio" 
 
         name={card.cardName} 
 
         value={lo.radioName} 
 
         checked={!!lo.selected} 
 
         onChange={this.onInputChange} 
 
         /> 
 

 
        }) 
 
        } 
 
       </ul> 
 
      )) 
 
       } 
 
       < button onClick={this.onSubmit}>Print Cards</button> 
 
      </div> 
 
     } 
 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<CardsList />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>