未出现样式化组件反应复选框

Question

您好，我的风格有问题，即使使用经典输入也不会出现复选框，我尝试了很多东西，但错误仍在继续。 我使用 styled-component，react-hook-form，typescript。

//import tools
import React, { FunctionComponent, useState } from "react";
import styled from "styled-components";
import { useForm, SubmitHandler } from "react-hook-form";

//import model will be useless with api
import Pokemon from "../models/pokemon";

//import helpers
import formatType from "../helpers/format-type";

type Props = {
  pokemon: Pokemon;
};
// type field
type Field = {
  value: any;
  error?: string;
  isValid: boolean;
};
// types form

type Inputs = {
  name: Field;
  hp: Field;
  cp: Field;
  types: Field;
};
// style

const CardHoverable = styled.div``;
const CardImage = styled.div`
  display: flex;
  justify-content: center;
  img {
    width: 250px;
  }
`;
const CardStacked = styled.div``;
const CardContent = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
`;
const FormGroup = styled.div`
  box-shadow: 10px 5px 5px grey;
  margin-bottom: 5px;
`;
const CardAction = styled.div``;
const Input = styled.input.attrs({ type: "checkbox" })`
  display: flex;
  position: absolute;
  width: 50px;
`;
const PokemonForm: FunctionComponent<Props> = ({ pokemon }) => {
  const [form] = useState<Inputs>({
    name: { value: pokemon.name, isValid: true },
    hp: { value: pokemon.hp, isValid: true },
    cp: { value: pokemon.cp, isValid: true },
    types: { value: pokemon.types, isValid: true },
  });

  // const changeValue = () => {
  //   setForm(onSubmit);
  // };
  //types pokemon
  const types: string[] = [
    "Plante",
    "Feu",
    "Eau",
    "Insecte",
    "Normal",
    "Electrik",
    "Poison",
    "Fée",
    "Vol",
    "Combat",
    "Psy",
  ];
  const hasType = (type: string): boolean => {
    return form.types.value.includes(type);
  };

  //form using maybe moved in other folder after
  const {
    register,
    handleSubmit,
    watch,
    // formState: { errors },
  } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
  console.log(watch("name"));
  console.log(watch("hp"));
  console.log(watch("cp"));
  console.log(watch("types"));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <CardImage>
        <img src={pokemon.picture} alt={pokemon.name} />
      </CardImage>

      <CardHoverable>
        <CardStacked>
          <CardContent>
            {/* Pokemon name */}
            <FormGroup>
              <label>Nom</label>
              <input
                value={form.name.value}
                {...register("name", { required: true, maxLength: 20 })}
              />
            </FormGroup>
            {/* Pokemon hp */}
            <FormGroup>
              <label>Point de vie</label>
              <input
                value={form.hp.value}
                type="number"
                {...register("hp", { min: 1, max: 100, maxLength: 20 })}
              />
            </FormGroup>
            {/* Pokemon cp */}
            <FormGroup>
              <label>Dégâts</label>
              <input
                value={form.cp.value}
                type="number"
                {...register("cp", { min: 1, max: 100, maxLength: 20 })}
              />
            </FormGroup>
            {/* Pokemon types */}
            <FormGroup>
              <label>Types</label>
              {types.map((type) => (
                <div key={type}>
                  <Input
                    type={"checkbox"}
                    id={type}
                    value={type}
                    checked={hasType(type)}
                  ></Input>

                  <p className={formatType(type)}>{type}</p>
                </div>
              ))}
            </FormGroup>
          </CardContent>
          <CardAction>
            {/* Submit button */}
            <input type="submit" name="Valider" />
          </CardAction>
        </CardStacked>
      </CardHoverable>
    </form>
  );
};

export default PokemonForm;

如果你知道那个问题，你能帮助我谢谢。 我试图在 inputs.attrs 中传递类型复选框，所以我不知道如何解决这种情况我有一些问题是样式组件或 typescript 有问题还是我没有看到你能看到的东西。

Answer 1

您的输入有一个“位置：绝对” css 规则。 尝试将“position:relative”添加到 FormGroup，使其相对于它定位。

来自 MDN 文档：“绝对定位的元素相对于其最近的定位祖先（即最近的非静态祖先）定位。如果定位的祖先不存在，则它相对于 ICB（初始包含块 -另请参阅 W3C 定义），它是文档根元素的包含块。”

Answer 2

我已经导入 html 实现所以这是问题所在