检索 option.id 而不是在选择输入中 option.name

Question

所以我有一个可重用的表单字段作为选择输入倍数，我正在填写 redux 存储中的选项。这如预期的那样工作得很好。但是如果我提交表格，我将得到我所说的 option.name(球员姓名，例如"帕特里克"(而不是 options.id(这是数据库中唯一的球员密钥(。因此，如果我碰巧有两个帕特里克在玩，我将很难在游戏逻辑中区分它们。有没有办法从选择输入中检索 id 而不是名称？

以下是组件选择输入多个.js：

import React from 'react';
import PropTypes from 'prop-types';
function SelectInputMultiple(props) {
let wrapperClass = 'form-group';
if (props.error.length > 0) {
wrapperClass += ' has-error';
}
return (
<div className={wrapperClass}>
<label htmlFor={props.id}>{props.label}</label>
<div className="field">
<select
className="form-control"
id={props.id}
multiple
onChange={props.onChange}
name={props.name}
>
{/* ID displayed for debugging purposes */}
{props.options.map(option => (
<option key={option.id}>
{option.id}: {option.name}
{option.nickname && ` (${option.nickname})`}
</option>
))}
</select>
</div>
{props.error && <div className="alert alert-danger">{props.error}</div>}
</div>
);
}
SelectInputMultiple.propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
options: PropTypes.array,
error: PropTypes.string
};
SelectInputMultiple.defaultProps = {
error: ''
};
export default SelectInputMultiple;

这是加载组件(gameform.js(的"页面"：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SelectInputMultiple from '../common/SelectInputMultiple';
import SelectInput from '../common/SelectInput';
import {
games,
x01Variants,
conditions,
cricketVariants,
atcVariants,
splitscoreVariants
} from './assets';
export default class GameForm extends Component {
constructor(props) {
super(props);
this.players = props;
this.handleMultipleChange = this.handleMultipleChange.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
state = {
selectedPlayers: [],
game: 'X01',
x01variant: '501',
inCondition: 'Straight',
outCondition: 'Double',
cricketVariant: 'Cut-Throat',
atcVariant: 'Normal',
splitscoreVariant: 'Steel Dart',
errors: {}
};
formIsValid() {
const _errors = {};
if (this.state.selectedPlayers.length === 0)
_errors.selectedPlayers = 'You need to select at least one player';
this.setState({
errors: _errors
});
return Object.keys(_errors).length === 0;
}
handleChange = e => {
{
e.target.name === 'game' && this.props.onGameChange(e.target.value);
}
this.setState({
[e.target.name]: e.target.value
});
};
handleMultipleChange = e => {
let _selectedPlayers = [...e.target.options]
.filter(o => o.selected)
.map(o => o.value);
this.setState(prevState => ({
selectedPlayers: { ...prevState.selectedPlayers, _selectedPlayers }
}));
};
handleSubmit = e => {
e.preventDefault();
if (!this.formIsValid()) return;
let _game = {
selectedPlayers: this.state.selectedPlayers,
game: this.state.game,
x01Variant: this.state.x01variant,
inCondition: this.state.inCondition,
outCondition: this.state.outCondition,
cricketVariant: this.state.cricketVariant,
atcVariant: this.state.atcVariant,
splitscoreVariant: this.state.splitscoreVariant
};
this.props.onSubmit(_game);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<SelectInputMultiple
id="players"
label="Players"
name="players"
onChange={this.handleMultipleChange}
options={this.props.players}
error={this.state.errors.selectedPlayers}
/>
<SelectInput
id="game"
label="Game Type"
name="game"
onChange={this.handleChange}
options={games}
value={this.state.game}
error={this.state.errors.game}
/>
{this.state.game === 'X01' && (
<>
<SelectInput
id="x01Variant"
label="Variant"
name="x01Variant"
onChange={this.handleChange}
options={x01Variants}
value={this.state.x01variant}
error={this.state.errors.x01Variants}
/>
<SelectInput
id="inCondition"
label="In Condition"
name="inCondition"
onChange={this.handleChange}
options={conditions}
value={this.state.inCondition}
error={this.state.errors.condition}
/>
<SelectInput
id="outCondition"
label="Out Condition"
name="outCondition"
onChange={this.handleChange}
options={conditions}
value={this.state.outCondition}
error={this.state.errors.condition}
/>
</>
)}
{this.state.game === 'Cricket' && (
<>
<SelectInput
id="cricketVariant"
label="Variant"
name="cricketVariant"
onChange={this.handleChange}
options={cricketVariants}
value={this.state.cricketVariant}
error={this.state.errors.cricketVariant}
/>
</>
)}
{this.state.game === 'Around the Clock' && (
<>
<SelectInput
id="atcVariant"
label="Variant"
name="atcVariant"
onChange={this.handleChange}
options={atcVariants}
value={this.state.atcVariant}
error={this.state.errors.atcVariants}
/>
</>
)}
{this.state.game === 'Split-Score' && (
<>
<SelectInput
id="splitscoreVariant"
label="Variant"
name="splitscoreVariant"
onChange={this.handleChange}
options={splitscoreVariants}
value={this.state.splitscoreVariant}
error={this.state.errors.splitscoreVariants}
/>
</>
)}
<input type="submit" value="Start Game" className="btn btn-primary" />
</form>
);
}
}
GameForm.propTypes = {
onSubmit: PropTypes.func.isRequired,
onGameChange: PropTypes.func.isRequired,
players: PropTypes.array
};

提前感谢您对正确方向的任何指导。

Answer 1

您可以像这样向选项标签添加值属性

<option key={option.id} value={option.id}>

在 select 标签的onChange中，您可以获得如下所示的值

handleChange = (e) => {
console.log(e.target.value)
// remaining logic
}

示例工作代码沙盒