http://plnkr.co/edit/f8Z4bucIq0WblkNSIMP5?p=preview
render: function() {
console.log('render', this.state)
return (
<div>
<p>Click to get the full Modal experience!</p>
<ReactBootstrap.Button
bsStyle="primary"
bsSize="large"
onClick={this.open}
>
Launch demo modal
</ReactBootstrap.Button>
<ReactBootstrap.Modal show={this.state.showModal} onHide={this.close}>
<span>The Modal</span>
</ReactBootstrap.Modal>
</div>
);
}
The JSX seems to be compiling. The Modal component is available. The show prop is being set when you click the button. The Bootstrap CSS is there.
But the Modal always shows on page load even though its show prop is false.
What am I doing wrong?
I just took a look at your plunker and saw that you were using an older version of react-bootstrap. I think this was your problem I changed the version to a newer one and it worked.
https://cdnjs.com/libraries/react-bootstrap I just used the v0.28.3
Related
I am using react-bootstrap version 1.5.2 in react version 17.0.1. The problem is that the modal closes immediately after I click anywhere inside the modal body and that is not its natural behavior. I looked at some other questions that suggested using backdrop={ 'static' } but that too didn't work.
The other modal that I have in the page opens just fine and that too has the same components - the accordion inside. The only thing that is different here is I have get methods in useState and elements inside accordion is editable (used some functions there) but I dont think they are related to this modal behaviour as I haven't used anything to trigger the state. This the code how I have implemented the modal.
//the show.hide toggle is the usestate
const [showHelper, setShowHelper] = useState(false);
<div className="clarify-icon" onClick={() => setShowHelper(true)}>
<FaInfoCircle size="24" color="#BC2A20" className="pointer" />
</div>
<Modal
show={showHelper}
// backdrop="static"
onHide={() => setShowHelper(false)}
className="modal-left"
>
<Modal.Header closeButton>
<Modal.Title>Helper Text Templates</Modal.Title>
</Modal.Header>
<Modal.Body>
<Accordion defaultActiveKey="0">
...
</Modal>
It is pretty much the same thing. I am not sure what went wrong here.
I am using TypeScript in React. I would like to create custom alerts and add to them images. I used
this method:
private alert() {
alert("This is an Alert Dialog");
}
Do you have any idea how to customize it?
Thans in advance for tips.
What you may want to look for is a modal box,
as you could style that so display alerts.
This page can help you get started:
https://www.w3schools.com/howto/howto_css_modals.asp
Or look into bootstrap which simplifies modals a lot:
https://getbootstrap.com/docs/4.0/components/modal/
The alert box is a system object, and not subject to CSS. You might want to use a third party library for that or add your own alert popup. Either way you can't style the default alert box.
You need to use modals. Here it is a sample:
import React from "react";
export const Modal = ({modalContent, style}) => {
return (
<div className="modal" style={style}>
{modalContent}
</div>
);
};
And usage is like this:
import { Modal } from '../Shared/Modal';
....
{this.state.Modal && <Modal style={{ animation: "fadeIn 1s, scaleUp 1s" }}
modalContent={
<div className="Add-BillRange">
<h1> MODAL </h1>
</div>
}
/>}
this.state.Modal controls if the modal should be showed or not.
I've been using react-table heavily throughout my React app which has been so useful but now I've got a weird bug I believe
I've got a react table with a subcomponent structured as such
<ReactTable
data={Data}
columns={columns}
SubComponent={row => {
return (
<div>
<p>I am the subcomponent</p>
<button onClick={this.toggleHidden.bind(this)} >
Click to additional information
</button>
{!this.state.isHidden && <p>Hello world</p>}
</div>
);
}}
/>
And here's what that looks like in the browser - the blue button on the left opens and closes the subcomponent and that works just fine, I've used subcomponents like this throughout my React App with no problems
When clicking the 'Click to additional information' button I want to show additional information ('Hello world' in this example) it runs this piece of code
constructor () {
super()
this.state = {
isHidden: true
}
}
toggleHidden () {
this.setState({
isHidden: !this.state.isHidden
})
}
But what happens in the browser is that the subcomponent toggle is closed and looks like this
If I reopen the subcomponent you can see that the 'hello world' is now showing so if did work as I wanted but just automatically closing the subcomponent which I didn't want to happen
In the console I'm not getting any errors or logs from react-table - it seems that any time I try to set a state inside of the react-table subcomponent that it will automatically close like this
My guess is that setting the state has reset all the states and that is what is confusing react-table, but I don't see how it would be?
I've just updated react-table to the latest version 6.8.6 but still have the same problem
Is this a bug or is there something I've done wrong here?
i fixed this by collapseOnDataChange: false
I had a similar issue. I have a subcomponent and inside the subcomponent are buttons which trigger functions when clicked:
The delete button had the following code:
<button id="delete" onClick={this.deleteClient('id')}>Delete</button>
where deleteClient is defined as:
deleteClient = (clientRef) => {
console.log(`deleting ${clientRef}`)
}
With the above code, "deleting id" would console.log both when I opened the subcomponent and when I clicked on the button.
I resolved the problem by using a callback in onClick as such:
<button id="delete" onClick={() => this.deleteClient('id')}>Delete</button>
Now "deleting id" only console.logs once, at the appropriate time, which is when I hit "Delete".
TL;DR:
set your onClick to a callback function.
Hope that helps!
I want the OverlayTrigger to be able to dismiss the Popover by both clicking outside the button and clicking on the button. However, when I set the trigger to be trigger={['click', 'focus']}, the Popover would flash and disappear when I click to button to show it.
getInitialState() {
return { show: true };
},
classificationPopover() {
return (
<ReactBootstrap.Popover id="popover" title="Popover">
Pop!
</ReactBootstrap.Popover>
);
},
render: function() {
return (
<div>
<ReactBootstrap.OverlayTrigger
trigger={['click', 'focus']} // Here is probably the tricky part
placement="right"
overlay={this.classificationPopover()}>
<ReactBootstrap.Button
bsStyle="default"
className="btn btn-default btn-circle">
<div className="btn-circle-text">?</div>
</ReactBootstrap.Button>
</ReactBootstrap.OverlayTrigger>
</div>
)
}
fiddle
This happens when you click outside the button, and then you click the button. But if you just click the button and close the popover with the button, things work fine.
I know that adding a RootClose property in OverlayTrigger and just keep "click" for trigger would work, but for my work requirement I'm not allowed to use RootClose, so I need a different solution. Thanks :D
For anyone attempting to use trigger with OverlayTrigger, please consider using Overlay instead.
The OverlayTrigger component is great for most use cases, but as a
higher level abstraction it can lack the flexibility needed to build
more nuanced or custom behaviors into your Overlay components. For
these cases it can be helpful to forgo the trigger and use the Overlay
component directly.
https://react-bootstrap.github.io/components.html#overlays
https://react-bootstrap.github.io/react-overlays/#overlay
I haven't managed to wrap my head around how to make use of existing modal libraries with React. For reference, I'm using the awesome remodal.
component.js.jsx
openNewModal: function () {
// The OpenModal component is wrapped around the modal's class which keeps it hidden until we show it here.
var modal = $(ReactDOM.findDOMNode(this.refs.modal)).remodal();
modal.open();
}
render: function () {
return(
<div onClick={this.openNewModal}>
<OpenModal ref="modal" />
</div>
);
}
modal.js.jsx
handleSubmit: function(e) {
e.preventDefault();
},
render: function () {
return(
<form onSubmit={this.handleSubmit}>
...
</form>
);
}
The modal opens up just fine. However, the binding on the onSubmit doesn't work. At first, I thought I'm doing something wrong. I added an onClick handler somewhere in the modal.js.jsx but still nothing would fire.
The interesting part is that, if I executed the binding immediately it worked, as in <form onSubmit={this.handleSubmit()}>. Which means that React fine up to the point that I actually open() the modal.
Is there a simple solution/example for modals and React?
The interesting part is that, if I executed the binding immediately it worked, as in . Which means that React fine up to the point that I actually open() the modal.
This happened because you explicitly added the click event once the modal actually placed in DOM. I think the solution could be in this way. Please add your modal mockup in the component.js.jsx like -
render: function () {
return(
<div onClick={this.openNewModal}>
<div class="remodal" data-remodal-id="modal">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm" onSubmit={this.handleSubmit}>OK</button>
</div>
</div>
);
}
Then hide the modal mockup with CSS(if it is not hided bydefault by remodaljs). Then add your event(handleSubmit) to the ok button or to the form if modal is opened in form.
In openNewModal function instead of remodal the modal just open the modal.
Modal mockup is copied from remodal example. Do replace with your requirement.To be true i didn't have knowledge on remodal but i do faced the same problem while using the bootstrap modal.