react-native-router-flux version: 3.39.1
Hi, i need to access to component state when the user clicks on Back button of navbar to go to previous scene .
Is there a way of doing this ?
i need this to verify the state if the user did some working on any textInput.
https://github.com/aksonov/react-native-router-flux/issues/647
If you use the "cheat" that jo-asakura says, you be able to access component state onBack button :)
// your scene
<Scene key="someKey"
component={ SomeComponent }
onRight={
(state) => {
// state.scene.navigationState.myData is { hello: 'world' }
}
} />
// your component
class SomeComponent extends Component {
// ...
handleButtonClick() {
this.props.navigationState.myData = { hello: 'world' };
}
// ...
}
PS: in my case i have put this line at render function to always save new data.
render(){
this.props.navigationState.myData = this.state;
return()
}
Related
How to do this in Razor pages?
On page load I want to load a list of Cars into an object that I can later access when I load a partialview via an AJAX call.
When I run the code below (after I click the 'Load' button) the values of 'Cars' in OnGetCarPartial is null...
How do I maintain the value of 'Cars' between initial content page load and the subsequent AJAX call?
(Note the reason I want to do this, is that eventually I want _carService.ReadAll to run asynchronously in a thread on page load, updating the 'Cars' list every second, so whenever I load the partialview, I get the latest 'Cars' list without having to call _carService.ReadAll().)
PageModel:
namespace ApiTest.Pages.Cars
{
public class AjaxPartialModel : PageModel
{
private ICarService _carService;
public List<Car> Cars { get; set; }
public AjaxPartialModel(ICarService carService)
{
_carService = carService;
}
public async Task OnGetAsync()
{
if (Cars == null)
{
Cars = _carService.ReadAll();
}
}
public PartialViewResult OnGetCarPartial()
{
return Partial("_CarPartial", Cars);
}
}
}
Content page AJAX
#page
#model AjaxPartialModel
<p><button class="btn btn-primary" id="load">Load</button></p>
<div id="grid"></div>
#section scripts{
<script>
$(function () {
$('#load').on('click', function () {
$('#grid').load('/Cars/Index?handler=CarPartial');
});
});
</script>
}
I am using flutter web to parse some website.
I need to detect the mouse hover and click inside a htmlElementView and then get the corresponded element. I tried to listen the onMouseUp() but it didn't work. can you give me advise?
Widget myfunc(){
ui.platformViewRegistry.registerViewFactory(
'my-html',
(int viewId) => IFrameElement()
..style.border = 'none'
..srcdoc = webData
..onMouseUp.listen((event) {
print('onMouseUp => $event');
})
..onSelect.listen((event) {
print('onSelect => $event');
})
..onMouseDown.listen((event) {
print('onMouseDown=> $event');
})
..onMouseEnter.listen((event) {
print('onMouseEnter => $event');
})
);
return HtmlElementView(
viewType:'my-html',
);
}
I plan to follow this post to extract the element, but it only work outside of htmlElementView().
How to get the selected text or the inner html in Dart
I don't find what is wrong but I use followed solution as an alternate.
I insert the JavaScript and listen to postMessage() on Dart side.
Step 1. add postMessage() in the HTML. I parse entire web HTML and insert the event.
var newElement = html.Element.html(element.outerHtml);
print('newElement=> ${newElement.outerHtml}');
newElement.attributes['onmouseover'] = 'window.parent.postMessage(this.id, \'*\')';
Step 2. Add the listener on the Dart side.
#override
void initState(){
super.initState();
html.window.onMessage.listen( listen);
}
void listen(dynamic event) {
print('listen...');
var data = (event as html.MessageEvent).data;
print(data);
}
How can I disable the physical device back button on Android with React-Native? I don't want to enable it for the user.
There is no out of the box support from React Native Navigation as of today on v2. However, you could use BackHandler from React native itself. To handle it and return false to disable it.
Doc on BackHandler
Example
BackHandler.addEventListener('hardwareBackPress', function() {
return false;
});
In activity you can override the onBackPressed() and comment the calling to super class.
#Override
public void onBackPressed() {
// super.onBackPressed(); comment this line to disable back button press
}
Current open screen is tracked with a listener created when the application is launched, in app.js. Main component of the app creates a BackHandler listener, which responds to the device back button according to the currently open screen.
Main component:
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
}
onBackPress = () => {
if (this.props.currentScreen.name === 'app.main') {
Alert.alert(
'Confirm exit',
'Do you want to exit App?',
[
{text: 'CANCEL', style: 'cancel'},
{text: 'OK', onPress: () => {
BackHandler.exitApp()
}
}
]
);
} else {
Navigation.pop(this.props.currentScreen.id);
}
return true;
}
App.js
//register to compomentDidApperaListener to keep track on which screen is currently open. The componentName and Id are stored in my redux store
Navigation.events().registerComponentDidAppearListener(({ componentId, componentName }) => {
store.dispatch(updateCurrentScreen({'name': componentName, 'id': componentId}))
})
I am rendering modal using react and redux.
I've seen thousand of examples of how to create a modal, but none on how to fire it inside another component.
I took the same approach to render modals on redux
on this question
My store is this:
export const store=createStore(
rootReducer,
compose(
applyMiddleware(thunk)
))
And the main component:
class Main extends React.Component {
render () {
return(
<BrowserRouter>
<Provider store={store} >
<App/>
</Provider>
</BrowserRouter>
)
}}
The app component is where I am guessing I should render the modal
class App extends React.Component {
render () {
return(
<div className="main-app">
<Home />
<Modal />
</div>
)
}}
But how can I update the state of this Modal component from within the components inside <Home >
My modal component looks like this:
import LoginModal from './LoginModal';
const MODAL_COMPONENTS = {
'LOGIN': LoginModal
}
class ModalRoot extends React.Component {
render() {
const SpecificModal = MODAL_COMPONENTS[this.props.modal.modalType];
if(!this.props.modal.showModal) return <SpecificModal />
return null
}
}
let mapStateToProps=state=>{
return {
modal: state.modal
}
}
export default connect(mapStateToProps)(ModalRoot);
Which will be the best approach to change the state three (store) of my redux app to change the state of the modal?
Thanks
Suppose you want to trigger the modal by clicking a button in Home button. You can pass in dispatch function to Home using mapDispatchToProps and dispatch action that changes the state of modal from there.
actions.js
function changeModal(payload) {
return {
type: 'CHANGE_MODAL',
payload,
}
}
reducer
// below defines what's in store.modal
function modalReducer(state = {}, action) {
switch(action.type) {
case: 'CHANGE_MODAL':
return {
...state,
...action.payload
}
// ... rest of your code
}
}
Home component
class Home extends Component {
//... rest of logic
changeModal = (modal) => {
const currentModal = {
showModal: true,
modalType: modal,
}
this.props.changeModal({ modal: currentModal });
}
render() {
// im using 2 buttons to trigger different modals,
return <div>
<button onClick={() => this.changeModal('HOME')}>trigger home modal</button>
<button onClick={() => this.changeModal('OTHER')}>trigger other modal</button>
</div>
}
}
const mapDispatchToProps = (dispatch) => ({
changeModal: (payload) => dispatch(changeModal(payload))
});
// insert mapDispatchToProps as a second argument to connect
// home component may or may not have mapStateToProps
export default connect(mapStateToProps, mapDispatchToProps)(Home);
So when you press the button, the state.modal will change and it will show the modal depending on the new state.
I want to take a view and instead of opening a new page I want to just open that view inside a Jquery dialog. I was just wondering how it's done or if possible.
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Jquery_Dialog.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
namespace Jquery_Dialog.Controllers
{
public class HomeController : Controller
{
private IEnumerable<Product> Products
{
get
{
return new List<Product>
{
new Product {ProductID = 1, Name = "Train", Category = "Toy", Price = 29.99M},
new Product {ProductID = 2, Name = "Truck", Category = "Toy", Price = 19.99M},
new Product {ProductID = 3, Name = "Bread", Category = "Food", Price = 2.49M},
new Product {ProductID = 4, Name = "Cookies", Category = "Food", Price = 2.99M}
};
}
}
public ActionResult Index()
{
IEnumerable<Product> productList = Products;
return View(productList);
}
public ActionResult Details(int id)
{
Product model = Products.Where(p => p.ProductID == id).SingleOrDefault();
return Request.IsAjaxRequest() ? PartialView(model) : PartialView(model);
}
public ActionResult About()
{
ViewBag.Message = "Your app description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
Index.cshtml
#model IEnumerable<Jquery_Dialog.Models.Product>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css " />
<script src="http://code.jquery.com/jquery-1.8.2.js "></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js "></script>
<table> #foreach (var item in Model) {
<tr>
<td>
#Html.ActionLink(item.Name, "Details", new { id = item.ProductID }, new { #class = "ajax-details" })
</td>
</tr>
}
</table>
<div id="dialog" title="Title of dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script>
$(function () {
$('.ajax-details').on('click', function (e) { // bind to click event
// go get the page using the link's `href`
$.get($(this).prop('href'), function (response) {
$(response).dialog(); // take the response and throw it up in a dialog
// optional: Use jQuery UI's options to specify buttons and other
// settings here as well. It's also probably a good idea to
// bind the close event and $().remove() this element from
// the page on close since the user can click links over and
// over. (prevent DOM overload of hidden elements)
});
e.preventDefault(); // don't let it continue on
});
});
</script>
<script>
$("#dialog").dialog();
</script>
As you can see I have a simple dialog that opens a div but I want to be able to open the details view instead of clicking the ActionLink and going to a different page, I want to be able to click the ActionLink and have it open up in the dialog.
Assuming you make the ActionLink a little more accessible (by using a class name for instance):
#Html.ActionLink(item.Name, "Details", new { id = item.ProductID },
/* htmlAttributes: */ new { #class = "ajax-details" })
You also make a modification to the action so we can fetch partial contents when it's an ajax request:
public ActionResult Details(int id)
{
// this is another way of making sure that AJAX calls get partial content,
// but a normal visit would render the entire page.
return Request.IsAjaxRequest() ? PartialView(model) : View(model);
}
Optional You could also adjust your _ViewStart.cshtml file to do the same if this was common place on the website to render partial views/ajax supplementing:
#{
Layout = IsAjax ? null : "~/Views/Shared/_Layout.cshtml";
}
Now, we wire it up with AJAX. Again, reference the class name we game the link earlier (ajax-details):
$('.ajax-details').on('click',function(e){ // bind to click event
// go get the page using the link's `href`
$.get($(this).prop('href'), function(response){
$(response).dialog(); // take the response and throw it up in a dialog
// optional: Use jQuery UI's options to specify buttons and other
// settings here as well. It's also probably a good idea to
// bind the close event and $().remove() this element from
// the page on close since the user can click links over and
// over. (prevent DOM overload of hidden elements)
});
e.preventDefault(); // don't let it continue on
});
Don't have the opportunity to test it, but should get you in the ball park. if it doesn't get you close enough, let me know and I'll revisit the answer and adjust.