在 select (ReactJs) 上添加/刪除選項時觸發 onchange

Question

當我在 select 中添加新選項時，我想觸發 function。 這是 select 中的代碼

<select name="projects" id="projects" onChange={handleChange}>
              {Object.keys(items.projects).length !== 0 ? 
              items.projectList.map(i => {return<option>{i}</option>})
              : <option>Create new project</option> }
            </select>

Function 我觸發在 select 中添加選項

function handleAdd(event,name,desc){
        itemDispatch({type:'ADD_PROJECT', name, desc});
        document.getElementById("projects").dispatchEvent(new Event ('change'));
        event.preventDefault();
    }

手柄改function

 function handleChange(){
        alert("change");
    }

Answer 1

這是 Hooks 解決方案

import React, {useRef} from 'react';

const MyComponent = () =>{

    const myRefname= useRef(null);

    const handleChange = () => {
       //You can trigger event manually
        myRefname.current.change();
    }

    return (
      <div onChange={handleChange}>
        <select ref={myRefname}>
          <option value="1">1</option>
        </select>
      </div>
     );
}