Estoy usando reaccionar para mi proyecto y tengo la cadena a continuación.
const text= "<p><strong>Late 19th Century</strong></p><ul><li>in Yellowstone Park, every type of <input type="text" /> was prohibitedas</li></ul>"y yo uso:
<div dangerouslySetInnerHTML={{ __html: text }}></div>cómo manejar la entrada onChange cuando uso peligrosamente SetInnerHTML en una cadena en reaccionar.
En este punto, está trabajando con HTML nativo, ya no es React y no puede tratarlo como tal. Tendrá que seguir el camino del conejo de adjuntar manualmente detectores de eventos al HTML establecido o simplemente usar React como se pretende.
NOTA: Asumo que tienes una buena razón para hacer esto. De lo contrario, no lo recomiendo para casos de uso normales en React.
Dicho esto, aquí hay una forma en que aún podría usar la cadena de HTML con el estado de React.
Para simplificar, agregué un atributo de id a la input en su cadena. También tenga en cuenta que, debido a la diferencia entre cuándo se activa el evento de cambio de DOM nativo y el evento de cambio React, debe hacer clic fuera de la entrada para ver el nuevo valor.
const {useState, useEffect} = React; const text= '<p><strong>Late 19th Century</strong></p><ul><li>in Yellowstone Park, every type of <input id="myText" type="text" /> was prohibitedas</li></ul>' const Example = () => { const [value, setValue] = useState(''); useEffect(() => { const el = document.getElementById('myText'); el.addEventListener('change', (e) => setValue(e.target.value)); }, []); console.log('value', value); return <div dangerouslySetInnerHTML={{ __html: text }}></div>; } ReactDOM.render(<Example />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>