I am trying to implement a menu that shows up on hover. The problem is that the menu hides while hovering between the DropdownOption child elements, so whenever I hover between options 1 and 2. Each child is a div and has a margin of 0px
openDropdown = () => {
this.setState({showList: true})
}
closeDropdown = () => {
this.setState({showList: false})
}
showList = () => {
return (
<DropdownContainer onMouseEnter={this.openDropdown} onMouseLeave={this.closeDropdown}>
<DropdownOption>Option1</DropdownOption>
<DropdownOption>Option2</DropdownOption>
</DropdownContainer>
)
}
render () {
return (
<div onMouseEnter={this.openDropdown}>
<MenuButtonContainer>
Title
</MenuButtonContainer>
{this.state.showList ? this.showList() : null}
</div>
)
}
This sounds like an event bubbling issue.
Where you have your event listener callbacks, e.g.:
openDropdown = () => {
this.setState({showList: true})
}
Try accessing the event object by including it as a parameter to the function. Then on the event object, call stopPropagation() E.g:
openDropdown = (event) => {
event.stopPropagation()
this.setState({showList: true})
}
Related
I am trying to pass a custom component to a MUI Dialog in such way that it should open the Dialog itself and render its children.
const CustomDialog = ({children, someCustomComponent}) => {
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return(
<>
{someCustomComponent} // use this component to call handleOpen/handleClose
<Dialog>
<DialogTitle>
<DialogTItle>
<DialogContent>{children}</DialogContent>
<DialogActions>...</DialogActions>
</Dialog>
</>
);
}
CustomDialog.propTypes = {
someCustomComponent: PropTypes.node.isRequired,
}
And then call it like this
<CustomDialog someCustomComponent={<h1>open</h1>}>
{myDialogContent}
</CustomDialog>
Is this possible? So, essentially, I don't always want a button to open my Dialog. I want to have any component I pass to it to be able to open it.
This is kind of how this is done by using Button
return(
<>
<Button onClick={handleClickOpen} />
<Dialog>
...
but I want to pass any element to it.
Thanks!
A simple way to do it is with React.cloneElement
const CustomDialog = ({ children, someCustomComponent }) => {
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
// clone the component and add the onClick handler
const customComponentClone = React.cloneElement(someCustomComponent, {
onClick: handleClickOpen
});
return (
<>
{customComponentClone}
<Dialog>
<DialogTitle>
<DialogTItle>
<DialogContent>{children}</DialogContent>
<DialogActions>...</DialogActions>
</Dialog>
</>
);
}
This way you can use it like you mentioned
<CustomDialog someCustomComponent={<h1>open</h1>}>
{myDialogContent}
</CustomDialog>
Check here a live version
Iam using Ant Design for React Js UI. Am using Tree component to show up in the list. I also have 2 button to expand and collapse the Tree list. I use the defaultExpandAll prop to manage this.
On the expand and collapse button click i set a bool to true and false respectively.
Button it doesn't expand on the button click.
If I set True initially to that flag state it works.
Is there any work Around.
I have 2 components. (Expand and collapse button are in parent component)
**Parent Component**
setExpandOrCollapse(value) {
this.setState({ expandOrCollapse: value });
}
<HeaderRow>
<Button onClick={() => this.setExpandOrCollapse(true)}>Expand All</Button>
<Button onClick={() => this.setExpandOrCollapse(false)}>Collapse All</Button>
</HeaderRow>
<Card>
{ItemTree && (ItemTree.length > 0) ? (
<ItemTree
dataSource={ItemTree}
expandOrCollapse={expandOrCollapse}
/>
) : null }
</Card>
**Child Component**
<Tree
draggable={isDraggable}
defaultExpandAll={expandOrCollapse}
>
{loopitemNodes(dataSource)}
</Tree>
dataSource is obtained from Redux api call.
Is there any work around.
The states in Ant design which are prefixed with default only work when they are rendered for the first time (and hence the default).
For working out programmatic expand and collapse, you need to control the expansion of tree using expandedKeys and onExpand props.
import { flattenDeep } from "lodash";
class Demo extends React.Component {
state = {
expandedKeys: []
};
constructor(props) {
super(props);
this.keys = this.getAllKeys(treeData);
}
getAllKeys = data => {
// This function makes an array of keys, this is specific for this example, you would have to adopt for your case. If your list is dynamic, also make sure that you call this function everytime data changes.
const nestedKeys = data.map(node => {
let childKeys = [];
if (node.children) {
childKeys = this.getAllKeys(node.children);
}
return [childKeys, node.key];
});
return flattenDeep(nestedKeys);
};
onExpand = expandedKeys => {
console.log("onExpand", expandedKeys);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.setState({
expandedKeys
});
};
renderTreeNodes = data =>
data.map(item => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key} dataRef={item}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.key} {...item} />;
});
expandAll = () => {
this.setState({
expandedKeys: this.keys
});
};
collapseAll = () => {
this.setState({
expandedKeys: []
});
};
render() {
return (
<Fragment>
<button onClick={this.expandAll}>Expand All</button>
<button onClick={this.collapseAll}>Collapse All</button>
<Tree onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}>
{this.renderTreeNodes(treeData)}
</Tree>
</Fragment>
);
}
}
Codesandbox
class Demo extends React.Component {
state = {
expandedKeys: ["0-0-0", "0-0-1"],
autoExpandParent: true,
selectedKeys: []
};
onExpand = expandedKeys => {
console.log("onExpand", expandedKeys);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.setState({
expandedKeys,
autoExpandParent: false
});
};
onSelect = (selectedKeys, info) => {
console.log("onSelect", info);
this.setState({ selectedKeys });
};
renderTreeNodes = data =>
data.map(item => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key} dataRef={item}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.key} {...item} />;
});
onExpandAll = () => {
const expandedKeys = [];
const expandMethod = arr => {
arr.forEach(data => {
expandedKeys.push(data.key);
if (data.children) {
expandMethod(data.children);
}
});
};
expandMethod(treeData);
this.setState({ expandedKeys });
};
onCollapseAll = () => {
this.setState({ expandedKeys: [] });
};
render() {
return (
<Fragment>
<Button onClick={this.onExpandAll} type="primary">
ExpandAll
</Button>
<Button onClick={this.onCollapseAll} type="primary">
CollapseAll
</Button>
<Tree
onExpand={this.onExpand}
expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent}
selectedKeys={this.state.selectedKeys}
>
{this.renderTreeNodes(treeData)}
</Tree>
</Fragment>
);
}
}
please refer to the Codesandbox link
I am trying to create a react component with imported data from Google API. I can see the code is working in the console.log but when I try to use that code in React render method, I am not getting anything. When I move my function inside the class it comes up as the function not defined. I cannot understand why?
function handleTouchTap() {
console.log('CHIP selected');
authorize();
}
function handleAccounts(response) {
console.log(response.result.username);
var username = response.result.username
console.log(username);
}
function authorize(event) {
var useImmidiate = event ? false : true;
var authData = {
client_id: CLIENT_ID,
scope: SCOPES,
immidiate: useImmidiate
};
gapi.auth.authorize(authData, function (response) {
gapi.client.load('analytics', 'v3').then(function () {
console.log(response);
gapi.client.analytics.management.accounts.list().then(handleAccounts);
});
});
}
class Chips extends React.Component {
render() {
return (
<div style={styles.wrapper}>
<Chip
onTouchTap={handleTouchTap}
style={styles.chip} >
<Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} />
Login
</Chip>
<Chip
style={styles.chip} >
<Avatar icon={<FontIcon className="material-icons">account_circle</FontIcon>} />
{this.username}
</Chip>
</div>
);
}
}
In most cases, when you want to render something that might change, you want to add it to the state. That way when you call setState the component knows it needs to rerender and show the changes.
Here I added the functions as component methods, so that you can call this.setState on the result. Ideally you would probably do this with redux and use actions but this will work as a self contained component.
class Chips extends React.Component {
handleTouchTap = () => {
console.log('CHIP selected');
this.authorize();
}
handleAccounts = (response) => {
var username = response.result.username;
this.setState({
username
});
}
authorize = (event) => {
var useImmidiate = event ? false : true;
var authData = {
client_id: CLIENT_ID,
scope: SCOPES,
immidiate: useImmidiate
};
gapi.auth.authorize(authData, (response) => {
gapi.client.load('analytics', 'v3').then(() => {
console.log(response);
gapi.client.analytics.management.accounts.list()
.then(this.handleAccounts);
});
});
}
render() {
return (
<div style={styles.wrapper}>
<Chip
onTouchTap={this.handleTouchTap}
style={styles.chip}>
<Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} />
Login
</Chip>
<Chip
style={styles.chip} >
<Avatar icon={<FontIcon className="material-icons">account_circle</FontIcon>} />
{this.state.username}
</Chip>
</div>
);
}
}
I am trying to trigger an event for my reactjs component when it is outside it. Currently I have a collapsible div (blue background) that I want to close once the user clicks outside of it. I have an method pageClick in it to log the event but I can't find a property to use:
componentDidMount() {
window.addEventListener('mousedown', this.pageClick, false)
}
pageClick(e) {
console.log('testing=pageClick', e)
}
How can I detect whether I am on the component with the collapseclass or not so I can change the state of it?
codepen here
You can check the class of the clicked element to know if it belongs to your collapsible element
componentDidMount() {
window.addEventListener('mousedown', this.pageClick.bind(this), false)
// ^^^^^^^^^^
// bind your function pageClick to this so you can call setState inside
}
pageClick(e) {
const el = e.target;
if (e.target.classList.contains('blue')) {
this.setState({ open: false });
}
}
But this is a poor solution because if you have many different DOM nodes in your collapsible element e.target will be the element below the mouse, not the parent .collapse element.
So I suggest you to use a library to detect the click outside your element : react-onclickoutside do the job perfectly.
You can see an implementation of your use case using react-click-outside in this fiddle.
You can listen for click event on the document like this -
document.addEventListener("click", this.closeComponent);
As an example you can define your collapsible component like this -
import React, { Component } from 'react';
export default class CollapsibleComponent extends Component {
constructor(props) {
super(props);
this.state = {
style : {
width : 350
}
};
this.showComponent = this.showComponent.bind(this);
this.closeComponent = this.closeComponent.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeComponent);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeComponent);
}
showComponent() {
const style = { width : 350 };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeComponent);
}
closeComponent() {
document.removeEventListener("click", this.closeComponent);
const style = { width : 0 };
this.setState({ style });
}
render() {
return (
<div
id = "myCollapsibleComp"
ref = "ccomp"
style = {this.state.style}
>
<div className = "comp-container">
<a
href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeComponent}
>
×
</a>
</div>
</div>
);
}
}
I want to replace a broken link with a default image in react. I'd typically use onerror for this but it is not working as expected. Specifically, I get repeated errors of "Cannot update during an existing state transition (such as within render)." Eventually, the default image appears, but it takes a long time (many prints of this error). This is a very similar question asked here: react.js Replace img src onerror. I tried this solution (top one, not using jQuery) but it causes the error described. I guess onError must be getting triggered continually, thus causing the constant rerendering. Any alternative solutions/fixes?
import React from 'react';
import { connect } from 'react-redux';
//import AddImageModal from '../components/AddImageModal.js';
import Button from 'react-bootstrap/lib/Button';
//import { getPostsByUserId } from 'actions'
import Posts from '../components/Posts.js';
var Modal = require('react-modal');
require('../../styles/AddImageModal.scss');
import { save_post } from '../actions';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
var MyWallScreen = React.createClass({
getInitialState: function() {
return {
modalIsOpen: false,
imageUrl: ""
};
},
openModal: function() {
this.setState({modalIsOpen: true});
},
afterOpenModal: function() {
// references are now sync'd and can be accessed.
this.refs.subtitle.style.color = '#f00';
},
closeModal: function() {
this.setState({modalIsOpen: false});
},
setUrl: function(e,val)
{
if (e.keyCode === 13)
{
this.setState({
imageUrl: val
});
}
},
resetImageUrl: function()
{
this.setState({
imageUrl: ""
});
},
onError: function() {
this.setState({
imageUrl: "default.jpg"
});
},
render: function() {
const { userPosts, dispatch } = this.props;
return (
<div>
<button onClick={this.openModal}>Add Image</button>
{/* The meat of the modal. */}
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles} >
<div className="modalBox">
<h2 className="modalBanner">Add an image link</h2>
<input ref="urlInput"
className="modalInput"
onKeyDown={e=>this.setUrl(e,this.refs.urlInput.value)}/>
{this.state.imageUrl ?
<img className="modalImage"
src={this.state.imageUrl}
onError={this.onError()}/>
:<div className="modalImage"></div>
}
<div>
<Button className="modalButton" bsStyle = "success"
onClick = {() => {
dispatch(save_post(0,this.state.imageUrl));
this.closeModal();
this.resetImageUrl();
}}>
Post
</Button>
<Button className="modalButton" bsStyle = "danger"
onClick = {() => {
this.closeModal();
this.resetImageUrl();
}}>
Cancel
</Button>
</div>
</div>
</Modal>
<Posts posts={userPosts}/>
</div>
);
}
});
function mapStateToProps(state, ownProps) {
return {
userPosts: state.posts[0]
}
}
MyWallScreen = connect(mapStateToProps)(MyWallScreen);
export default MyWallScreen;
The code is calling this.onError rather than passing a reference to it. Every call to render is calling this.onError(). Remove the parentheses, and see if that fixes it:
<img className="modalImage"
src={this.state.imageUrl}
onError={this.onError()}/> // `onError` is being called here
Fixed version:
<img className="modalImage"
src={this.state.imageUrl}
onError={this.onError}/> // `onError` is being passed as a reference here
You can replace the image broken link without keeping image urls in state.
<img
onError={(event)=>event.target.setAttribute("src","default-image-link")}
src="image-broken-link"
/>
I tried this way and it works for me hope this will work for you.
Make sure to put the below useState within same function where u used img tag.
const [error, setError] = useState(false);
<img src={`${error ? DefaultLogo
:`${AgentApiURL}/publicservices/images/${props.item[0]}`}`}
alt="plating"
onError={() => setError(true) }
/>