反应：单击 select 选项时更改 state 值

Question

So In my react app, I have select menu and and two( width and height ) state variables. Here is sandbox

const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

// select option

<div className="flex items-center space-x-2">
        <select
          id="countries"
          class="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        >
         
          <option
            onClick={() => {
              setWidth(100);
              setHeight(200);
            }}
            selected
            value="header_ad"
          >
            Resolution 1
          </option>
          <option
            onClick={() => {
              setWidth(1000);
              setHeight(2000);
            }}
            selected
            value="header_ad"
          >
            Resolution 2
          </option>
        </select>
      </div>

I wanted to change the values of width and height when I clicked on the select option values.

ie When I click on Resolution 1 option I wanted to set the values of width and height to be 100 and 200 respectively and the same as if I clicked on Resolution 2 option.

How can I achieve this? I try to change their values with onClick event but it doesn't work.

Answer 1

So option does not have onClick prop so you can do something like this:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="flex items-center space-x-2">
        <select
          id="countries"
          class="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
          onChange={(e) => {
            const selectedValue = e.target.value;
            if(selectedValue === "header_1"){
              setWidth(100);
              setHeight(200);
            }
            if(selectedValue === "header_2"){
              setWidth(1000);
              setHeight(2000);
            }
          }}
        >
          {/* {category?.categories?.map((catid, y) => (
              ))} */}
          <option value="default" disabled>
            Please select
          </option>
          <option value="header_1">HEADER AD111</option>
          <option value="header_2">222</option>
        </select>
      </div>
      <br></br>
      <span>Height:{height}</span>
      <br></br>
      <span>Width:{width}</span>
    </div>
  );
}

https://codesandbox.io/s/long-sunset-uow79l?file=/src/App.js:0-1434

Answer 2

onClick on option element does NOT exist. Please check the following code snippet.

https://codesandbox.io/s/upbeat-wind-4i89o7?file=/src/App.js

    import { useState } from "react";
    import "./styles.css";

    const data = {
      option1: {
        width: 1024,
        height: 768
      },
      option2: {
        width: 100,
        height: 78
      }
    };

    export default function App() {
      const [width, setWidth] = useState(0);
      const [height, setHeight] = useState(0);

      const handleOnChange = (value) => {
        setWidth(data[value].width);
        setHeight(data[value].height);
      };

      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <div className="flex items-center space-x-2">
            <select
              id="countries"
              className="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              onChange={(e) => handleOnChange(e.currentTarget.value)}
            >
              <option selected value="option1">
                Option 1
              </option>
              <option value="option2">Option 2</option>
            </select>
          </div>
          <br></br>
          <span>Height:{height}</span>
          <br></br>
          <span>Width:{width}</span>
        </div>
      );
    }

Answer 3

you need to change your code to this code:

<div className="flex items-center space-x-2">
        <select
          id="countries"
            onChange={() => {
              setWidth(1000);
              setHeight(2000);
            }}
          class="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        >
         
          <option 
            selected
            value="header_ad"
          >
            Resolution 1
          </option>
          <option
            selected
            value="header_ad"
          >
            Resolution 2
          </option>
        </select>
      </div>

let me know if its work cheers !!

Answer 4

change your event handler from onClick to onChange on selectbox. in your event handler, check the selected option value and change you state accordingly.