Comments (8)
from react-iframe.
All right, will look at this next!
from react-iframe.
@svenanders I was abe to implement this use case (@conorot) in previous versions
v1.5.0 to v1.6.2
But this is not supported anymore because since v1.7.0. I guest you migrate the implementation from
PureComponent
to Stateless
or Function Component
Since then this warning is fire by React
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
And I'm not able to get a reference.
This works on v1.6.2 but not in 1.7.0
import React from 'react'
import { Button } from 'antd'
export default class DemoComponent extends React.PureComponent {
formRef = {
iFrame: null,
}
handleSubmit = () => {
const { iFrame } = this.formRef
if (iFrame && iFrame.refs) {
const ref = iFrame.refs.iframe
ref.contentWindow.postMessage('submit form', '*')
}
}
saveIFrameRef = formRef => {
this.formRef.iFrame = formRef
}
render() {
return (
<div>
<Iframe
url="SOME_URL"
width="100%"
height="600px"
id="legacyEditor"
display="initial"
position="relative"
allowFullScreen
ref={this.saveIFrameRef}
/>
<Button key="submit" type="primary" onClick={this.handleSubmit}>
{'Send message to the IFrame'}
</Button>
</div>
)
}
}
from react-iframe.
I have code that is very similar to what @jcvalerio is doing. I had to roll back to 1.6.2.
from react-iframe.
I get Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
from react-iframe.
@hlolli that is the problem we are discussing. If you use version 1.6.2 the above example from @jcvalerio will work.
from react-iframe.
Any chance to see this feature added directly into the package ? :)
from react-iframe.
Does this work now? Any suggestions on alternatives? thanks.
from react-iframe.
Related Issues (20)
- Get iframe current playing time HOT 1
- Its element type 'ReactElement<any, any> | Component<IIframe, any, any> | null' is not a valid JSX element. HOT 2
- Hide Iframe URL in the browser HTML HOT 1
- Bug: prop name is `allowFullScreen` HOT 2
- It's Clipboard read & write allowed? HOT 1
- Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.
- Check if user scroll till the end
- Hide scrollbars but be able to scroll
- Access duration of a video
- correct README.md array with square brackets for sandbox multiple values
- How to listen to URL changes inside the iframe and prevent URL from redirecting! HOT 3
- Bug: Camelcase 'allowFullScreen' doesn't work when 'allow' attribute is set
- Issue serving built CRA app with <Iframe src="./public/myfile.html">
- Sandbox type does not allow multiple values HOT 2
- Render HTML file from src HOT 1
- onLoad function Safari support HOT 2
- PDF in iframe on iPad - only first page is displayed HOT 1
- Expo support ? HOT 1
- allowFullScreen doesn't work for Chrome HOT 1
- how to resolve the cross domain because of iframe? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-iframe.