选择以整个对象作为值的选项

Question

在我的 React 选择输入中，我想迭代驱动程序数组，并为每个驱动程序生成单个驱动程序作为值。但是，当我控制台记录目标值时，我只有一个 [object Object]，如果我尝试调用，例如 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>

Answer 1

driver

的值是一个JS对象，但是

value

的

<option>

属性需要一个字符串。在 JavaScript 中将对象解析为字符串将得到

[object Object]

。您将需要在该空间中存储单独的键值。如果您需要在选择该选项时从对象中提取特定值，我建议将

driver.key

存储在那里，然后将其用作回调函数中的查找引用。

Answer 2

HTML 选项值仅支持字符串值。您可以序列化您的对象来存储它并在读取时反序列化它。

Answer 3

当将数据设置为值时，您可以将数据字符串化，并且在使用函数内的值时也需要解析它。 这是一个例子：

<Input
   type="select"
   value={progressionItem?.rankFrom}
   name="rankFrom"
   onChange={(e) => { setProgressionItem({ ...progressionItem, [e.target.name]: JSON.parse(e.target.value)._id, rankFromName: JSON.parse(e.target.value).rankName })            }} >
                  <option>Select</option>
          {
             ranks.map(rank=><option value={JSON.stringify(rank)} key={rank._id}>{rank.rankName}</option>)
                  }
                </Input>