Dynamische Generierung Radiobuttons

Question

ich eine redux Form haben, wo ich einige Radio-Schaltflächen:

 <label htmlFor="passType">Pass type</label> 
     {passType.touched && passType.error && <span className="error">{passType.error}</span>} 
     <br /> 
     <input 
      type="radio" 
      {...passType} 
      id="passType" 
      value="0" 
      checked={passType.value === '0'} 
     /> VIP<br /> 
     <input 
      {...passType} 
      type="radio" 
      id="passType" 
      value="1" 
      checked={passType.value === '1'} 
     /> Regular<br /> 

Alles schön und gut, aber jetzt sind die Passtypen dynamisch vom Zustand erzeugt werden muss:

PassTypes ": [{" id ": 1," Name ":" VIP "}, {" id ": 2," Name ":" normal "}]

Dies funktioniert nicht:

const renderPassTypes = passTypes => passTypes.map((passType, i) => 
(
    <input 
    type="radio" 
    {...passType} 
    id="passType" 
    value={passType.Id} 
    checked={passType.Id === ?!?!?} 
    /> {passType.Value}<br /> 
) 

Wie soll ich eine Gruppe von Optionsfeldern von einem Objekt codieren?

Ich habe auch einen Validator, die als gut funktionieren weiterhin benötigt:

const sendInviteValidator = createValidator({ 
    passType: required, 
}); 

Answer 1

Was Sie versucht haben, scheint gut.

render() { 
    // Extract the fields from Redux Form 
    const {fields: {passType}} = this.props 

    // Read the options. 
    // According to what you showed, it is structured as: 
    // 
    // [ 
    // {"Id":1,"Name":"VIP"}, 
    // {"Id":2,"Name":"Normal"}, 
    // ] 
    const {passTypes} = this.props 
    return (
    <div> 
     <div className="label">Pass type</div> 
     <div className="controls"> 
     {passTypes.map(option => 
     <label> 
      <input 
      type="radio" 
      {...passType} 
      value={option.Id} 
      checked={passType.value === option.Id} 
      /> 
      {option.Name} 
     </label> 
    )} 
     </div> 
    </div> 
) 
} 

Das obige Verfahren wird über renderpassTypes Iterieren der Funk Eingänge zu konstruieren.