这个HTML和JS在Next.JS上看起来怎么样

Question

下面是一个应该如何实现的示例：codepen.io/j0be/pen/jWGVvV

这个HTML和JS在Next.JS上看起来怎么样？

我想在Next.js width TypeScript和SCSS上制作这个代码！但我不知道如何使用TypeScript和SCSS来转换Next.js上的HTML和JavaScript。请帮帮我！！！

我的JavaScript:

$('.dropdown-el').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
$('.dropdown-el').removeClass('expanded');
});

我需要让我的输入选择是自定义的，当我打开我的选择。我的选择很漂亮我的HTML:

<span class="dropdown-el">
<input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance"><label for="sort-relevance">Relevance</label>
<input type="radio" name="sortType" value="Popularity" id="sort-best"><label for="sort-best">Product Popularity</label>
<input type="radio" name="sortType" value="PriceIncreasing" id="sort-low"><label for="sort-low">Price Low to High</label>
<input type="radio" name="sortType" value="PriceDecreasing" id="sort-high"><label for="sort-high">Price High to Low</label>

</span>

我的SCSS:

$color:#3694d7;
$timing:.3s;
body {
text-align:center;
background:mix($color,#fff,10%);
min-height:95vh;
margin:0;
padding:0;
border-bottom: 5vh solid $color;
font-family: "Myriad Pro","Arial",sans;
font-size:24px;
}
.dropdown-el {
margin-top:20vh;

min-width: 12em;
position: relative;
display: inline-block;
margin-right: 1em;
min-height: 2em;
max-height:2em;
overflow:hidden;
top: .5em;  
cursor: pointer;
text-align: left;
white-space: nowrap;
color: #444;

outline: none;
border: .06em solid transparent;
border-radius: 1em;
background-color: mix($color,#fff,25%);

transition: $timing all ease-in-out;
input:focus + label {
background: #def;
}
input {
width: 1px;
height: 1px;
display: inline-block;
position: absolute;
opacity: 0.01;
}
label {
border-top: .06em solid #d9d9d9;
display:block;
height: 2em;
line-height: 2em;
padding-left: 1em;
padding-right: 3em;
cursor: pointer;
position: relative;
transition: $timing color ease-in-out;  
&:nth-child(2) {
margin-top: 2em;
border-top: .06em solid #d9d9d9;
}
}
input:checked + label {
display:block;
border-top: none;
position: absolute;
top: 0;
width: 100%;
&:nth-child(2) {
margin-top: 0;
position: relative;
}
}

&::after {
content:"";
position: absolute;
right: 0.8em;
top: 0.9em;
border: .3em solid $color;
border-color: $color transparent transparent transparent;
transition: .4s all ease-in-out;
}
&.expanded {
border: .06em solid $color;
background: #fff;
border-radius: .25em;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
max-height:15em;

label {
border-top: .06em solid #d9d9d9;
&:hover {
color:$color;
}
}
input:checked + label {
color:$color;
}

&::after {
transform: rotate(-180deg);
top:.55em;
}
}
}

Answer 1

我用您的代码示例执行了CODESANDBO：https://codesandbox.io/s/gifted-volhard-dgbrym?file=/src/App.tsx

我使用useForm钩子进行了更好的操作。您可以探索此挂钩以改进表单控件：https://react-hook-form.com/get-started/

TS REACT CODE

import { useForm, SubmitHandler } from "react-hook-form";
interface IFormInput {
sortType: string;
}
export default function App() {
const { register, handleSubmit } = useForm<IFormInput>();
const onSubmit = (data: IFormInput) => {
console.log(data);
};
return (
<div>
<form onSubmit={handleSubmit(onSubmit)} className="dropdown-el">
<input
{...register("sortType")}
type="radio"
value="Relevance"
checked
id="sort-relevance"
/>
<label htmlFor="sort-relevance">Relevance</label>
<input
{...register("sortType")}
type="radio"
value="Popularity"
id="sort-best"
/>
<label htmlFor="sort-best">Product Popularity</label>
<input
{...register("sortType")}
type="radio"
value="PriceIncreasing"
id="sort-low"
/>
<label htmlFor="sort-low">Price Low to High</label>
<input
{...register("sortType")}
type="radio"
value="PriceDecreasing"
id="sort-high"
/>
<label htmlFor="sort-high">Price High to Low</label>
<br />
<input type="submit" />
</form>
</div>
);
}