reactjsの1つのコンポーネントで複数のラジオボタングループを処理する方法は？

Question

私はボタンをお送りクリックで複数のラジオボタンのグループから選択されたラジオボタンの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

あなたはキーとしてグループ名を保持しているルックアップテーブルなどのオブジェクトを使用することができます。
変更するたびに、関連するオプションを使用して関連するグループを検索し、それに応じて新しい状態を設定する必要があります。

重要！ - ここで気付くべきことの1つは、プロパティのタイプを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>