2016-11-28 62 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存储在那里,然后将其用作回调函数中的查找参考。