react 中的 onChange 属性和自定义事件调度

问：

我正在测试我的库标记器的新版本，其中输入元素上有自定义事件调度：

this._input.dispatchEvent(new Event('change', { bubbles: true }));

问题在于，当触发自定义事件时，不会触发该输入的 onChange 属性。

const App = () => {
    const [tags, setTags] = useState(null)
    const inputRef = useRef(null)

    // Write the Tagger code inside a useEffect hook
    // It will run when the component is initially rendered
    useEffect(() => {
        // Define the Tagger options
        const taggerOptions = {
            allow_spaces: true,
        }

        inputRef.current.addEventListener('change', (e) => {
            console.log(e);
        });

        // Initialize Tagger
        tagger(inputRef.current, taggerOptions)
    }, []);

    const onChange = (e) => {
        setTags(e.target.value)
    };

    return (
        <div className="app">
            <input type="text" ref={inputRef} onChange={onChange} defaultValue="charles, louis, michel" />

            {tags && <pre>{tags}</pre>}
        </div>
    )
}

在上面的代码中，执行了 console.log，但不执行 setTags。

有没有办法使输入上的自定义更改事件在默认事件上触发？onChange={}

如果这是不可能的，我可以解释为什么。

这是否记录在只能使用本机事件的地方？

这是一个 CodePen 演示，可以在其中进行测试。

编辑

在 react js 中触发更改或输入事件的最佳方式是什么中的假定解决方案对我不起作用。这个问题的问题不在于值没有正确更新，而在于事件根本没有被触发，即使值错误。

我已将此代码添加到库中（对不起 ES5 代码，该库未更新为现代 JavaScript，我看不出迁移的理由。代码工作正常）：

_update_input: function () {
    // ReactJS overwrite value setting on inputs, this is a workaround
    // ref: https://stackoverflow.com/a/46012210/387194
    var inputProto = window.HTMLInputElement.prototype;
    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(inputProto, "value").set;
    nativeInputValueSetter.call(this._input, this._tags.join(','));
    this._input.dispatchEvent(new Event('input', { bubbles: true }));
},

这是我的实验性 CodePen，它应该可以工作，但事实并非如此。我做错了什么？必须有一个简单的解释，因为带有原始解决方案的 CodePen 演示工作正常。

我什至添加了这段代码，但它仍然不起作用（事件未触发）：

const App = () => {
    const [value, setValue] = useState('charles, louis, michel');
    const inputRef = useRef(null);
    const tags = tags_array(value);

    useEffect(() => {
        const taggerOptions = {
            allow_spaces: true,
        };
        tagger(inputRef.current, taggerOptions);
    }, [inputRef]);

    const onChange = (event) => {
        setValue(event.target.value);
    };
    
    const trigger = () => {
        const input = inputRef.current;
        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
        nativeInputValueSetter.call(input, 'one, two, three');
        input.dispatchEvent(new Event('input', { bubbles: true }));
    };

    return (
        <div className="app">
            <input type="text" value={value} ref={inputRef} onChange={onChange} />
            <br/>
            <ul>
                {tags.map((tag, index) => <li key={`${tag}-${index}`}>{tag}</li>)}
            </ul>
            <button onClick={trigger}>trigger change event</button>
        </div>
    )
}

为了确保我有相同的代码，我用 React 18 和钩子从原始解决方案修改了 CodePen，并且该代码确实有效，即使事件的触发器像我的代码一样在 React 中。