import {useState} from 'react' // 功能 //1 默认 密码选中 interface comTyle{ getTopSelect?:any } function LoginTopNav(props:comTyle){ let [topSelect,setTopSelect] =useState(1) const selectItem =(val:number)=>{ setTopSelect(val) props.getTopSelect(val) } return ( <div className="loginTopNav glb-flex1"> <div className={topSelect==1?'topSlectActions':''} onClick={()=>selectItem(1)}>password </div> <div className={topSelect==2?'topSlectActions':''} onClick={()=>selectItem(2)}>phone</div> </div> ) } export default LoginTopNav 用js怎么写
时间: 2024-02-18 21:01:33 浏览: 27
你可以这样写:
```
const { useState } = React;
function LoginTopNav(props) {
const [topSelect, setTopSelect] = useState(1);
const selectItem = (val) => {
setTopSelect(val);
props.getTopSelect(val);
};
return (
<div className="loginTopNav glb-flex1">
<div className={topSelect === 1 ? 'topSlectActions' : ''} onClick={() => selectItem(1)}>
password
</div>
<div className={topSelect === 2 ? 'topSlectActions' : ''} onClick={() => selectItem(2)}>
phone
</div>
</div>
);
}
export default LoginTopNav;
```
这是一个使用了 React Hooks 的函数组件,其中 `useState` 是一个 Hook,用于在函数组件中使用状态。在此组件中,我们使用 `useState` 定义了一个状态变量 `topSelect` 和一个更新该变量的函数 `setTopSelect`,并将 `topSelect` 初始化为 `1`。在 `selectItem` 函数中,我们根据传入的参数更新 `topSelect` 的值,并调用 `props.getTopSelect` 将选中的值传递给父组件。
注意,这里省略了 `comTyle` 接口的定义,因为在 JavaScript 中不需要使用接口来定义类型。