呈現一個條件表單元素

Question

我在表單上有一個select（aka picklist）字段。根據它的值，它會影響下一個字段（依賴字段），它是：另一個選擇，輸入類型文本或禁用的輸入。

中的僞

// 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;博士 - 有條件地添加刪除<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" /> 
     } 
     } 
    });  
    } 
}