Question

我有一个表单，其中必须上传菜单标题和类型。类型可以是食物菜单和饮料菜单。每种类型只有3张图片。我做了那个部分但是当选择菜单类型的单选按钮时，如果我选择第二个或第一个单选按钮以外的其他按钮，则会选择第一个单选按钮。我该如何解决这个问题？

代码可能很大，所以这里是演示

这里是简短的代码

const Preview = props => {
  return (
    <div>
      {props.files.map((file, index) => {
        if (['image/png', 'image/jpg', 'image/jpeg'].includes(file.type)) {
          return (
            <ClientUploadedImage
              key={index}
              file={file}
              id={index}
              menu_title={props.menu_title}
              type={props.type}
              foodmenuError={props.foodmenuError}
              handleChange={props.handleChange}
              handleTypeChange={props.handleTypeChange}
            />
          );
        }
        return <div>No File to Show Preview</div>;
      })}
    </div>
  );
};


const ClientUploadedImage = props => {
  return (
    <section id="menus-photo">
      <img src={props.file.preview} width={'400px'} height={'auto'} />
      <div className="content">
        <form className="form">
          <Radio
            value="food-menu"
            label={`Food Menu${props.id}`}
            name={props.id}
            handleChangeEvent={props.handleTypeChange}
            isChecked={props.type[props.id] === 'food-menu'}
          />
          <Radio
            value="beverages-menu"
            label={'Beverages Menu'}
            name={props.id}
            handleChangeEvent={props.handleTypeChange}
            isChecked={props.type[props.id] === 'beverages-menu'}
          />
          <InputField
            name={props.id}
            type="text"
            label="Menu Title"
            onChange={props.handleChange}
            value={props.menu_title[props.id]}
          />
        </form>
      </div>
    </section>
  );
};

Answer 1

您的类型数组在初始状态下为空。如果您直接从第二个图像中选择单选按钮，则使用索引1调用handleTypeChange。在该函数中，...types.slice(0, index)变为types.slice(0,1)，最终在空白数组上执行扩展操作，并且您的newValue将附加在第0个位置这导致选择第一个图像单选按钮。在这里你需要处理函数内第一个选择的空白数组条件，你将会很高兴。

当单击第二个或任何其他图像单选按钮时，第一个更新

1 个答案: