2016-11-28 60 views
1

在我的React選擇輸入中,我想迭代我的驅動程序數組,併爲每個驅動程序生成單個驅動程序作爲值。但是,當我控制檯登錄目標值時,我只有一個[對象對象],如果我嘗試調用,例如,driver.driverName我獲得「未定義」。爲什麼?選擇整個對象作爲值的選項

<label className="pt-label pt-inline"> 
     Autista 
     <div className="pt-select"> 
      <select onChange={this.changeDriver}> 
       <option>Scegli autista</option> 
       {this.props.drivers.map((driver) => { 
        return <option key={driver.key} 
            value={driver}>{driver.driverName} {driver.driverLastname}</option> 
            })} 
      </select> 
     </div> 
</label> 
+0

你也可以在這裏發佈對象嗎?或者甚至更好,你可以做一個工作小提琴? – Ionut

+1

創建您的自定義選項組件並將該組件實例作爲通道傳遞給驅動程序對象。因爲「value」屬性只接受字符串 –

+0

我編輯了我的問題。無論如何,即使與driverName不起作用。 – Arcy

回答

0

HTML選項值只支持字符串值。你可以序列化你的對象來存儲它,並在閱讀時反序列化它。

2

driver的值是一個JS對象,但<option>value屬性需要一個字符串。在JavaScript中將對象解析爲字符串將導致[object Object]。您需要在該空間中存儲一個單獨的鍵值。如果您在選擇該選項時需要從對象中提取特定值,那麼我建議將driver.key存儲在那裏,然後將其用作回調函數中的查找參考。