reactjs輸入選擇選項無法添加

您好我試圖從後端獲取選項列表，然後將它們映射到選項列表並添加到列表，但失敗。任何人都可以請指教嗎？reactjs輸入選擇選項無法添加

父組件：

fetch(urlMakerNames) 
.then((response) => response.json()) 
.then((responseJson) => { 
    var array = JSON.parse(responseJson.marker_names); 
    var options = array.map((opt, index) => { 
     console.log('opt = ' + opt + ', index = ' + index); 
     return '<option key="' + index + '" value="' + opt + '">' + opt + '</option>'; 
    }); 

    console.log('BEFORE options = ' + options + ', markerNames = ' + this.state.markerNames); 

    this.setState({ 
     markerNames: options 
    }); 

    console.log('AFTER options = ' + options + ', markerNames = ' + this.state.markerNames); 

}).catch((error) => { 
    console.error("MarkerForm error = " + error); 
});

子組件：

console.log('this.props.markerNames = ' + this.props.markerNames); 
<FormGroup> 
    <Input type="select" name="markerName" onChange={this.props.handleInputChange} disabled={this.props.isViewMode} required> 
     <option key="12345" value="TEST">TEST</option> 
     {this.props.markerNames} 
    </Input> 
</FormGroup>

日誌顯示：

opt = zzz, index = 0 
BEFORE options = <option key="0" value="zzz">zzz</option>, markerNames = 
this.props.markerNames = <option key="0" value="zzz">zzz</option> 
AFTER options = <option key="0" value="zzz">zzz</option>, markerNames = <option key="0" value="zzz">zzz</option>

正如從日誌可以看出，markerNames被傳遞到子組件的正確格式與<option key="12345" value="TEST">TEST</option>匹配，但只有TEST選項可以在輸入選擇ele中看到但是zzz消失了。

來源

2017-10-11 LOUDKING

FormGroup任何LIB的一部分？ –

擁有數組後，您不需要手動創建元素。通過在渲染函數中映射數組本身，將您的狀態用作JSX元素的源代碼。

試試這個：

fetch(urlMakerNames) 
.then((response) => response.json()) 
.then((responseJson) => { 
    var array = JSON.parse(responseJson.marker_names); 

    this.setState({ 
     markerNames: array 
    }); 

}).catch((error) => { 
    console.error("MarkerForm error = " + error); 
}); 



    <FormGroup> 
     <Input type="select" name="markerName" onChange={this.props.handleInputChange} disabled={this.props.isViewMode} required> 
      {this.props.markerNames.map((option, inx)=>{ 
       return <option key={inx} value={option}>{option}</option>; 
      })} 
     </Input> 
    </FormGroup>

來源

2017-10-11 02:34:32

您在這裏返回，而不是反應成分字符串

return '<option key="' + index + '" value="' + opt + '">' + opt + '</option>';

嘗試

return <option key={index} value={opt}>{opt}</option>;

這將返回反應組件，將您輸入JSX內呈現。

來源

2017-10-11 02:31:59 robbymurphy

reactjs輸入選擇選項無法添加

回答

相關問題