How do I make a working select with scss styles?-CodePudding

I did CODESANDBOX with your code example: codesandbox.io/s/keen-lehmann-dtwz2y?file=/src/App.tsx, So you can see how it turned out! This select don't work when I want to change value. Please show me how to make the same select but working!

This my Select.tsx:

import styles from "./select.module.scss"
import { useForm } from "react-hook-form";
import { useRef, useState } from "react";

interface IFormInput {
  sortType: string;
}

const Select = () => {
  const { register, handleSubmit } = useForm<IFormInput>();
  const [isOpened, setIsOpened] = useState(false);
  const [checked, setChecked] = useState(true);
  const dropdownRef = useRef(null);
   const handleClick = (e:any) => {
    setChecked(e.target.value);
    e = true;
  };

  const onSubmit = (data: IFormInput) => {
    console.log(data);
  };
  const handleOnClick = (event: any) => {
    console.log("test");
    setIsOpened(!isOpened);
    event.stopPropagation();
    event.preventDefault();
  };

  return (
    <div className={styles.select}>
      <p className={styles.pSelect}>Who are creating the ad?</p>
      <div className={styles.body}>
        <span
        ref={dropdownRef}
        onClick={handleOnClick}
        className={isOpened ? "expanded dropdown-el" : "dropdown-el"}
      >
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
          type="radio"
          name="radio"
          value="Freelancer"
          id="sort-relevance"
          defaultChecked={checked}
          onChange={() => setChecked(!checked)}
        />
        <label htmlFor="sort-relevance">Freelancer</label>
        <input
          type="radio"
          name="radio"
          value="Client"
          id="sort-best"
          defaultChecked={checked}
          onChange={() => setChecked(!checked)}
        />
        <label htmlFor="sort-best">Client</label>
        </form>
        </span>
      </div>
    </div>
  );
}

export default Select

CodePudding user response：

export default function App() {
  const { register, handleSubmit } = useForm<IFormInput>();
  const [isOpened, setIsOpened] = useState(false);
  const dropdownRef = useRef(null);
  const [checked, setChecked] = useState("Client"); // Set first initial value for select

  const handleClick = (e) => {
    setChecked(e.target.value);
    e.target.defaultChecked = true;
  };
  const onSubmit = (data: IFormInput) => {
    console.log(data);
  };

  const handleOnClick = (event: any) => {
    console.log("test");
    setIsOpened(!isOpened);
    event.stopPropagation();
    event.preventDefault();
  };

  return (
    <div>
      <span
        ref={dropdownRef}
        onClick={handleOnClick}
        className={isOpened ? "expanded dropdown-el" : "dropdown-el"}
      >
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type="radio"
            name="radio"
            id="sort-relevance"
            checked={checked === "Freelancer"}
            onClick={(e) => handleClick(e)}
          />
          <label
            htmlFor="sort-relevance"
            onClick={() => setChecked("Freelancer")}
          >
            Freelancer
          </label>
          <input
            type="radio"
            name="radio"
            id="sort-best"
            checked={checked === "Client"}
            onClick={(e) => handleClick(e)}
          />
          <label htmlFor="sort-best" onClick={() => setChecked("Client")}>
            Client
          </label>
        </form>
      </span>
    </div>
  );
}