在 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>
     );
}