我如何使用scss样式进行工作选择?

Question

我用你的代码示例做了CODESANDBOX: CODESANDBOX .io/s/keen-lehmann-dtwz2y?file=/src/App。tsx，所以你可以看到它的结果!当我想改变值时，这个选择不起作用。请告诉我如何使相同的选择，但工作!

---

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

Answer 1

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>
);
}