渲染條件表單元素

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}時，它必須在pickListValues !== null <select>之間pickListValues !== null

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

但是如果呈現輸入，我需要<selects>不在那里。

tl; renderValueField()根據我的renderValueField()的返回值，有條件地添加刪除<select>標記

Answer 1

您可以將<option>包裹在函數內的<select> ：

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