写一段代码:用nui里的下拉框,下拉框内容是按天查询和按月查询,并且是单选
时间: 2024-03-14 12:45:03 浏览: 106
好的,假设您使用的是React框架,可以参考下面的代码实现:
```jsx
import React, { useState } from "react";
function QueryForm() {
const [selectedQueryType, setSelectedQueryType] = useState("day");
// 处理查询类型变化事件
function handleQueryTypeChange(event) {
setSelectedQueryType(event.target.value);
console.log("当前查询类型为:" + event.target.value);
}
return (
<div>
<label htmlFor="queryType">查询类型:</label>
<select id="queryType" value={selectedQueryType} onChange={handleQueryTypeChange}>
<option value="day">按天查询</option>
<option value="month">按月查询</option>
</select>
</div>
);
}
export default QueryForm;
```
解释一下代码:
- 首先定义了一个QueryForm组件,使用useState钩子函数来定义selectedQueryType状态变量和setSelectedQueryType更新函数。
- 然后在组件中渲染一个label和一个select标签,其中label用于显示查询类型,select用于显示下拉框。在select标签中,用value属性绑定selectedQueryType变量,用onChange属性绑定handleQueryTypeChange函数,以便在下拉框选项变化时更新selectedQueryType变量的值。
- 最后,handleQueryTypeChange函数用于处理下拉框选项变化事件,将选中的选项值更新到selectedQueryType变量中,同时将其输出到控制台中。
阅读全文