En la aplicación React arrastro componentes
const Draggable = ({ children, onDragStart, onDragEnd }) => ( <div className="draggable" draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd} > {children} </div> );cuando soltaron estos componentes se convirtieron en elementos svg renderizados con d3js.
const onDrop = (e) => { e.stopPropagation(); const newElement = { id: elements.length + 1, x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY, data: draggedData }; setElements((elements) => [...elements, newElement]); }; ... useEffect(() => { const svg = d3 .select(svgRef.current) .attr("width", width) .attr("height", height); if (elements.length) { svg .selectAll(".node") .data(elements, (d) => d.id) .join( (enter) => { if (enter && prevCount !== elements.length) { const { type } = enter.datum().data; if (type === "person") { renderNode(enter, svg, setElements, "enter"); } else { renderInput(enter, svg, setElements, "enter"); } ...Un elemento svg contiene objeto extranjero con entrada y un botón (sería más botones).
node .append("foreignObject") .attr("width", labelWidth - labelPadding * 2) .attr("height", 22) .attr("x", labelPadding) .attr("y", labelPadding) .html((d) => { return `<div> <form> <input type='text' class='' /> <button type='button' onclick='alert("The form was submitted")'>Ok</button> </form> <div class='circle'></div> </div>`; });Quiero activar cambios en el estado del componente de reacción cuando haga clic en el botón dentro de svg. ¿Cómo puedo manejar esto?