呈现一个条件表单元素

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" /> 
     } 
     } 
    });  
    } 
}