条件付きフォーム要素をレンダリングする

Question

フォーム上に選択（別名選択リスト）フィールドがあります。その値に基づいて、次のフィールド（従属フィールド）に影響します。これは、別の選択、入力タイプのテキスト、または無効な入力のいずれかです。

擬似コード

// based on a state value, leadField, determine valueField 

// if leadField === null, return a disabled input 
// else, go through the array of leadField values 

// if a leadFieldValue === leadField 
// then go through leadFieldValue 

// if leadFieldValue.pickListValues is not empty 
// render the select options 
// else render an input type text 

コード

renderValueField() { 
    if(this.state.leadField === null) { 
      return <input type="text" id="input1" className="slds-input" disable/> 
    } else { 
     return this.props.territoryCriteriaFields.map((criteriaField) => { 
     const shouldRender = criteriaField.name === this.state.leadField; 
     if (shouldRender) { 
      if (typeof criteriaField.pickListValues !== 'undefined' && criteriaField.pickListValues.length > 0) { 
      return criteriaField.picklistValues.map((option) => { 
       return (
        <option value={option.value}>{option.label}</option> 
       ); 
      }); 
      } else { 
      return <input type="text" id="input1" className="slds-input" /> 
      } 
     } 
     });  
    } 
    } 

私の問題：私はページ上の上記{this.renderValueField}を呼び出すとき、それはとても

のように、 <select>の とき pickListValues !== nullの間にする必要があります

<select> 
{this.renderValueField()} 
</select> 

しかし、入力がレンダリングされた場合には、<selects>がそこに存在しないようにする必要があります。

TL; DR - 条件付きの戻り値に応じて、<select>タグを削除、追加、私のrenderValueField()

Answer 1

あなたが関数内<select>で<option> Sをラップすることができます：あなた `レンダリングで

renderValueField() { 
    if(this.state.leadField === null) { 
    return <input type="text" id="input1" className="slds-input" disable/> 
    } else { 
    return this.props.territoryCriteriaFields.map((criteriaField) => { 
     const shouldRender = criteriaField.name === this.state.leadField; 
     if (shouldRender) { 
     if (typeof criteriaField.pickListValues !== 'undefined' && criteriaField.pickListValues.length > 0) { 
      return (
      <select> 
       {criteriaField.picklistValues.map((option) => { 
       return (
        <option value={option.value}>{option.label}</option> 
       ); 
       })} 
      </select> 
     ); 
     } else { 
      return <input type="text" id="input1" className="slds-input" /> 
     } 
     } 
    });  
    } 
}