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

【问题标题】：How to use a select with options instead two buttons for onClick event ReactJS如何使用带有选项的选择而不是两个按钮用于 onClick 事件 ReactJS
【发布时间】：2021-09-01 18:43:23
【问题描述】：

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

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 布局。

【问题讨论】：

标签： reactjs grid babeljs jsx use-state

【解决方案1】：

您可以设置setClassName，方法是在选项的onChange 上传递事件对象并使用event.target.value 提取选定的值

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

【讨论】：