以下代码来自我的应用程序组件文件夹中的 NewFighterForm.js 文件：
import React from 'react';
import { updateNewFighterForm } from '../actions/newFighterForm.js';
import { connect } from 'react-redux';
import Button from 'react-bootstrap/esm/Button';
const NewFighterForm = ({ formData, updateNewFighterForm, handleSubmit, editMode }) => {
const {name, alias, nationality, division, stance, height, reach, status, champion, win, loss, draw, ko} = formData
const handleChange = event => {
const { name, value } = event.target
debugger
updateNewFighterForm(name, value)
}
return (
<div>
<h1>Add Fighter</h1>
<form onSubmit={event => {
event.preventDefault()
debugger
handleSubmit(formData)
}}>
<ol>
<ul>
<label>Add Name: </label>
<br></br>
<input
placeholder="Enter Name"
name="name"
onChange={handleChange}
value={name}
/>
</ul>
<label>Add Alias: </label>
<br></br>
<ul>
<input
placeholder="Enter Alias"
name="alias"
onChange={handleChange}
value={alias}
/>
</ul>
<label>Add Nationality: </label>
<br></br>
<ul>
<input
placeholder="Enter Nationality"
name="nationality"
onChange={handleChange}
value={nationality}
/>
</ul>
<label>Choose Division: </label>
<br></br>
<select name="division"
value={"" + division}
onChange={handleChange}>
<option disabled>Choose the following weight division</option>
<option value="Flyweight">Flyweight</option>
<option value="Bantamweight">Bantamweight</option>
<option value="Featherweight">Featherweight</option>
<option value="Lightweight">Lightweight</option>
<option value="Welterweight">Welterweight</option>
<option value="Middleweight">Middleweight</option>
<option value="Light Heavyweight">Light Heavyweight</option>
<option value="Cruiserweight">Cruiserweight</option>
<option value="Heavyweight">Heavyweight</option>
</select>
<br></br>
<label>Choose Fighter's Stance: </label>
<br></br>
<select name="stance"
value={"" + stance}
onChange={handleChange}>
<option disabled>Choose the following stance type</option>
<option value="Orthodox">Orthodox</option>
<option value="Southpaw">Southpaw</option>
</select>
<br></br>
<label>Add Height: </label>
<br></br>
<input
placeholder="Enter Height (i.e 5 ft 5 in)"
name="height"
onChange={handleChange}
value={height}
/>
<br></br>
<label>Add Reach: </label>
<br></br>
<input
placeholder="Enter Reach (i.e 68 in)"
name="reach"
onChange={handleChange}
value={reach}
/>
<br></br>
<label>Are they still fighting?</label>
<br></br>
<select name="status"
value={"" + status}
onChange={handleChange}>
<option disabled>Choose whether fighter is still competing</option>
<option value="inactive">inactive</option>
<option value="active">active</option>
</select>
<br></br>
<label>Check if they ever were a World Champion</label>
<input
type="checkbox"
name="champion"
defaultChecked={false}
value={champion}
/>
<br></br>
<label>W:</label>
<input
placeholder="Enter number of wins"
name="win"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={win}
/>
<br></br>
<label>L:</label>
<input
placeholder="Enter number of losses"
name="loss"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={loss}
/>
<br></br>
<label>D:</label>
<input
placeholder="Enter number of draws"
name="draw"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={draw}
/>
<br></br>
<label>KO:</label>
<input
placeholder="Enter number of KO"
name="ko"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={ko}
/>
<br></br>
<label>List for Fighter: </label>
<br></br>
<select name="lists"
onChange={handleChange}>
<option disabled>Choose List for Fighter</option>
</select>
<br></br>
<Button
type="submit"
value={ editMode ? "Update Fighter" : "Create Fighter" }
>Create Fighter</Button>
</ol>
</form>
</div>
)
}
const mapStateToProps = state => {
// debugger
return {
formData: state.newFighterForm,
lists: state.myLists
}
};
export default connect(mapStateToProps, { updateNewFighterForm })(NewFighterForm)
我的表单底部是我想输入下拉选择的地方，供用户选择他们想将战斗机添加到哪个列表中。在我放置在mapStateToProps中的调试器中，我看到了在“ lists: state.myLists ”中定义的列表数组。我希望能够正确映射数组并显示选择选项供用户选择列表。我假设我需要添加“列表”作为为NewFighterForm定义的破坏属性之一（如果我的理解正确，请告诉我）。如果需要更多详细信息，请告诉我，我会相应地更新帖子。谢谢大家，非常感谢！