Reactjs 如何使用onChange事件处理程序在表单中映射选择选项？ 从“React”导入React； 从“./actions/newFighterForm.js”导入{updateNewFighterForm}； 从“react redux”导入{connect}； 从“反应引导/esm/按钮”导入按钮； 常数NewFighterForm=({ formData， UpdateNewRightPerform， 手推， 编辑模式， 名单， }) => { 常数{ 名称 别名 国籍， 分部， 立场 高度， 达到 地位 冠军， 赢 损失,， 画 让开， listId， 列表 }=表格数据； 常量handleChange=（事件）=>{ 调试器； const target=event.target； const value=target.type==“checkbox”？target.checked:target.value； const name=target.name； updateNewFighterForm（名称、值）； 调试器； }; 返回( 添加战斗机 { event.preventDefault（）； 调试器； handleSubmit（formData）； }} > 添加名称： 添加别名： 添加国籍： 选择部门： 选择以下权重划分 飞锤 班塔姆重量 羽量级 轻量的 次中量级 中量级 轻量级 游船重量 重量级 选择战士的姿态： 选择以下站姿类型 正统的 左撇子 添加高度： 添加范围： 他们还在打架吗？ 选择战斗机是否仍在竞争 不活跃的 积极的 看看他们是否曾经是世界冠军 W: L: D: 让开： 战斗机名单： {lists.map（（list）=>( {list.attributes.title} ))} 创造战斗机 ); }; 常量mapStateToProps=（状态）=>{ 调试器； 返回{ formData:state.newFighterForm， 列表：state.myLists， }; }; 导出默认连接（MapStateTops，{UpdateNewFightPerform}）( 新战机 );

上面是我的新战机表单，用户将在其中填充，以便将新战机添加到列表或将现有战机更新到列表。我遇到的问题在表单底部的战斗机列表部分。我将list.id作为值传递，列表标题作为选项传递。但是，当我单击提交时，我并没有创建或编辑战斗机。我怎样才能着手解决这个问题？如果你需要更多信息，请告诉我

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,
  lists,
}) => {
  const {
    name,
    alias,
    nationality,
    division,
    stance,
    height,
    reach,
    status,
    champion,
    win,
    loss,
    draw,
    ko,
    listId,
    list,
  } = formData;

  const handleChange = (event) => {
    debugger;
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    updateNewFighterForm(name, value);
    debugger;
  };

  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}
            checked={champion}
            onChange={handleChange}
          />
          <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
            key={list.id}
            name="list"
            value={list.id}
            onChange={handleChange}
          >
            {lists.map((list) => (
              <option value={list.id}>{list.attributes.title}</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
);