オブジェクト全体を値として持つオプションを選択

Question

私のリアクションセレクト入力では、私はドライバアレイを繰り返し処理したいと思います。しかし、私がコンソールに目標値を記録するとき、私は[オブジェクトオブジェクト]しか持っていません。たとえば、driver.driverNameを呼び出そうとすると "undefined"を取得します。どうして？

<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

HTMLオプション値は文字列値のみをサポートします。オブジェクトを直列化して格納し、読み込み時に逆シリアル化することができます。

Answer 2

driverの値はJSオブジェクトですが、valueの属性が<option>の場合は文字列が必要です。 JavaScriptでオブジェクトを文字列に解析すると、[object Object]になります。そのスペースに個々のキー値を格納する必要があります。そのオプションが選択されているときにオブジェクトから特定の値を取得する必要がある場合は、driver.keyを格納し、コールバック関数の参照参照として使用することをお勧めします。