I have question why when I click on Grid not on the box which is {-5} the function is called but Grid is higher than the box so function should be ingored. How can I solve that.
<Box zIndex={-5} onClick={hideFormModal}>
<Grid
width="60vw"
placeItems="center"
position="fixed"
zIndex={1000}
top="50%"
left="50%"
transform="translate(-50%, -50%)"
textAlign="right"
>
<motion.div
variants={animation}
initial="initialPosition"
animate="onShow"
exit="onShowExit"
>
<form onSubmit={onCommentAdd}>
<Grid>
<Input
placeholder="Title"
onChange={(e) =>
onCommentChangeHandler(e, setCommentTitle)
}
bgColor="white"
borderEndRadius="0"
/>
<Textarea
}
/>
<Button type="submit" borderRadius="0">
Add
</Button>
</Grid>
</form>
</motion.div>
</Grid>
</Box>
)}
z-index property will work as you expect if both elements are siblings.
Here Box receives onClick events due to event propagation.
Events are propagated from the bottom to the top of the tree.
You should add onClick={(e) => e.stopPropagation()} on your grid item to stop event propagation.
For further information about this check:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#example_5_event_propagation
Related
Hi I was reproducing a MERN project to create a social app.
When I use materail-ui/core everything work fine, but I got in console.log this warning :
deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:
My container balise works fine but i got a warning about that too.(See the image).
here is my code :
import { Container, AppBar, Typography, Grow, Grid } from "#material-ui/core";
// this method is deprecated
import memories from "./components/images/memories.png";
// la route de l'image se trouve dans components
import Posts from "./components/Posts/Posts.js";
import Form from "./components/Form/Form.js";
// .js a la fin ??
function App() {
return (
// <div>yo</div>
<div>
<Container maxidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
<img src={memories} alt="memories" height="60" />
</Typography>
</AppBar>
<Grow in>
<Container>
<Grid
container
justifyContent="space-between"
alignItems="stretch"
spacing={3}
>
{/* grid pour les devices grandeur des telephoens */}
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={4}>
<Form />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
</div>
);
}
export default App;
So is this really deprecated because it's seems to work fine for me ?
I imported #material-ui/core, #devexpress/dx-react-core #devexpress/dx-react-grid and some other modules but issue is not resolving.
My App.js code:
import Grid from '#material-ui/core/Grid';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</div>
);
}
export default App;
Actually definition is not there. Just place this before App() function:
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
It will work.
The problem is that the example provided for the Grid component is a bit misleading. I just had exactly the same trouble with the Stack component, which suffers from the same problem.
If you use the example code as-is, it gives exactly this error because it includes Item elements. This gives the impression that each of your code fragments in the control needs to be wrapped in an Item element. Unfortunately, there is no such thing (unless you happen to define one).
So the solution is simply to exclude the Item elements:
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
</Grid>
</div>
);
I have a login page where I'm placing a button "Watch the video". On click of the button, I'm hiding the button and displaying a video.
Now my requirement is to start playing the video as soon as it displays without having to click the play button.
I'm trying to use refs and somehow I'm unable to set the ref to my video element.
Is there any way to set the refs to unrendered elements in componentDidUpdate?
Please help me!
Following is my code
export default class NewLoginPage extends Component {
constructor(props) {
this.vidRef = React.createRef();
this.state = {
showVideo: false
};
}
handleVideoClick = () => {
this.setState({ showVideo: true })
this.vidRef.current.play();
}
handleCloseClick = () =>{
this.setState({ showVideo: false })
}
render() {
let language_labels = labels["english_labels"]
console.log(labels)
console.log(language_labels)
return (
<div className="container-fluid no-padding">
<div className="new-login-div">
<AppBar className="app-bar">
<Toolbar className="tool-bar">
<img src={pmiLogo} />
{/* <NavLink to="/" id="invoice_upload">LOG OUT</NavLink> */}
{/* <Button className="logout-btn">REGISTER</Button> */}
</Toolbar>
</AppBar>
<Grid container>
<Grid item xs={4}>
<h1 className="welcome-heading">Self Service Portal</h1>
<TextField
className="id-field"
placeholder="Email"
inputProps={{
style: {
color: "#fff",
paddingLeft: "5px"
}
}}
/>
<br />
<Button className="login-btn" endIcon={<ArrowForwardIcon />}>Log In</Button>
</Grid>
<Grid item xs={8}>
<div className="video-div">
{this.state.showVideo && <div>
<IconButton className="close-btn" onClick={(event) => this.handleCloseClick()}>
<CloseIcon />
</IconButton>
<video ref={ref => { this.vidRef = ref }} width="500" height="285" controls className="video-container">
<source src={exampleVid} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>}
{!this.state.showVideo && <div className="intro-div">
<h5 className="intro-text">
Supporting the vitality and survival of US small businesses—who employ nearly half of the American workforce—is especially critical now. Let’s not forget just how essential they are.
</h5>
<Button
disableRipple={true}
className="video-button"
startIcon={<PlayArrowIcon className="play-icon" />}
onClick={(event) => this.handleVideoClick()}
>
Watch video
</Button>
<br />
<Button
disableRipple={true}
className="reg-button"
startIcon={<ChevronRightIcon className="play-icon" />}>
Register
</Button>
</div>}
</div>
</Grid>
</Grid>
</div>
</div>
);
}
}
React ref property is used to access DOM element reference.
If element is not rendered then DOM element is not created (deleted).
Thus you can't get a ref of something that doesn't exist.
You don't need to use a ref to do that, you can add the autoplay html property to your <video>
for details on autoplay
You can't make use of a ref to an element that is not yet rendered as Anton explained in his answer, the ref.current will be null.
However, it is suggested that you create a separate component for the video and it's logic from that of the login, not only it will solve the issue (the this.state.showVideo condition will stay in the parent component) but it is also how React components should be, for more details refer to this.
I have a html button that calls an asp button to dopostback, but nothing happens.
<input type='button' value='click me' id='btntoClick'/>
<div id='divServerBtn' style='display:none'>
<asp:button ID='myButton' runat='server' onClick='myOnclickMethod'> </div>
my jquery:
$(function(){
$("#btntoClick").on("click", function(){ $("#myButton").click(); })
});
OR
if I set the div to visible at run time, still clicking the button does nothing, it goes to codebehind but IsPostBack is false
$(function(){
$("#divServerBtn").attr("display", "");
});
Try something like this as a test, then modify your code accordingly. The main thing is to use OnClientClick, not OnClick. It is also important to include "return false;"
Your function:
<script>
function ShowMe() {
$(function() {
$("#divServerBtn").show();
});
}
</script>
Your aspx button and div example:
<div id='divServerBtn' style='display:none'>Me</div>
<br />
<asp:Button ID="Button1" runat="server" OnClientClick="ShowMe(); return false;" Text="Button" OnClick="Button1_Click" UseSubmitBehavior="False" />
Say, I have a zul page (page1.zul) like so:
<zk>
<textbox id="textbox1" ></textbox>
<button label="Display" onClick="display()" ></button>
<include id="include1" ></include>
<zscript>
display() {
include1.setSrc("page2.zul");
java.lang.Class[] argTypes = new java.lang.Class[]{String.class};
org.zkoss.xel.Function fn = include1.getChildPage().getZScriptFunction("doDisplay", argTypes);
fn.invoke(null, textbox1.value);
}
</zscript>
</zk>
But, I get the error - "Attempt to invoke method getZScriptFunction on null value". So, include1.getChildPage() is returning a null value i.e. I am not able to retrieve "page2" using getChildPage() and I am not sure how to go about it.
My second page is shown below:(page2.zul)
<zk>
<label id="label1" ></label>
<zscript>
doDisplay(String value) {
label1.setValue(value);
}
</zscript>
</zk>
If I enter something in the textbox and click the "Display" button, I want to set the value of label in a different page(i.e page2) to the value in the textbox. The idea is to pass value of a component from one page to a zscript function of another included page.
You can do this instead of Passing value.
in Page2.zul
<zk>
<label id="label1" ></label>
<zscript>
doDisplay(String value) {
Textbox textbox=(Textbox)((Include)label1.getSpaceOwner()).getSpaceOwner().getFellowIfAny("textbox1");
label1.setValue(textbox.getValue());
}
</zscript>
</zk>
You can change file1 as follows:
<zk>
<textbox id="textbox1" ></textbox>
<button label="Display" onClick="display()" ></button>
<!-- <include id="include1" ></include> -->
<div id="include"></div>
<zscript>
display() {
include.appendChild(Executions.createComponents("page2.zul", include, null));
}
</zscript>
</zk>
My suggestion is to use EventQueue instead to prevent the coupling of the two zul file.
More details, please reference to the sample code.
http://zkfiddle.org/sample/379s7ev/3-A-sample-for-using-Event-queue-to-talk-with-other-include