如何使用带有选项的 select 而不是 onClick 事件 ReactJS 的两个按钮

Question

我试图简单地更改 select 的两个按钮的使用，有两个选项，但钩子停止工作。

export default function Home() {
const [className, setClassName] = useState("grid");
return (
  <>
<select className="catalogo-exibicao">
          <option
            value="grid"
          >
            em grid
          </option>
          <option value="list">em lista</option>
        </select>
        <button
          className="view-btn list-view"
          title="List View"
          onClick={() => setClassName("list")}
        >
          List View
        </button>
        <button
          className="view-btn list-view"
          title="Grid View"
          onClick={() => setClassName("grid")}
        >
          Grid View
        </button>

      <div
        className={className}
      >
    </>
);
}

在其他文件中，我有样式表指定网格和列表的区别以更改我的 div 布局。

Answer 1

您可以通过传递事件对象并使用 event.target.value 提取所选值来设置 setClassName，在选项的 onChange 上

const [className, setClassName] = useState("grid");
return (
  <>
<select className="catalogo-exibicao" onChange={e => setClassName(e.target.value)}>
          <option
            value="grid"
          >
            em grid
          </option>
          <option value="list">em lista</option>
        </select></>);

如何使用带有选项的 select 而不是 onClick 事件 ReactJS 的两个按钮

How to use a select with options instead two buttons for onClick event ReactJS

grid

jsx

reactjs

babeljs

use-state