score:7
Accepted answer
i am sorry for not adding a comment i don't have the reputation yet. x will note you the number you are asking but don't try to update offset with x cause of the offset calculation defined on core.ts of the module.
export const getoffset = (page: number, limit: number): number => {
const offset = (page - 1) * limit;
return offset < 0 ? 0 : offset;
};
although you can try to get the html you want by parsing the event. a trick is to match a case with the params that the interface provide like next or previous labels
e.target.innertext
e.currenttarget.childnodes[0].innertext
*mind it is a string so care your number comparisons
import react from "react";
import reactdom from "react-dom";
import cssbaseline from "@material-ui/core/cssbaseline";
import { createmuitheme, muithemeprovider } from "@material-ui/core/styles";
import pagination from "material-ui-flat-pagination";
const theme = createmuitheme();
class example extends react.component {
constructor(props) {
super(props);
this.state = { offset: 0, limit: 3, total: 132, calc: 1, nlabel: ">>", plabel: "<<" };
}
handleclick(e, offset) {
let y = e.target.innertext;
//let y =e.currenttarget.childnodes[0].innertext;
if (y === this.state.plabel) y = number(this.state.calc) - 1;
if (y === this.state.nlabel) y = number(this.state.calc) + 1;
let x = offset / this.state.limit + 1;
console.log("x:" + x + " - y:" + y);
this.setstate({ offset, calc: y });
}
render() {
return (
<muithemeprovider theme={theme}>
<div>{this.state.offset}</div>
<div>{this.state.calc}</div>
<cssbaseline />
<pagination
limit={this.state.limit}
offset={this.state.offset}
total={this.state.total}
onclick={(e, offset) => this.handleclick(e, offset)}
nextpagelabel={this.state.nlabel}
previouspagelabel={this.state.plabel}
/>
</muithemeprovider>
);
}
}
reactdom.render(<example />, document.getelementbyid("root"));
Source: stackoverflow.com
Related Query
- How can I get innerHTML when clicking a button in React js?
- How can I get an input's value on a button click in a Stateless React Component?
- How can I print multiiple text areas when clicking on a button in reactjs
- How can I redirect to auth0 without clicking on the Log In button in react using the new auth0-spa.js?
- How can click on button to get one of components with react
- How to show/hide React components when clicking on a button that is in another component?
- How can I close my hamburger menu when clicking on a link using React JS? (using ReactJS hooks)
- How can I make only one list item expand when a button is clicked in React (no hooks)?
- How can I open a Modal when clicking on a customized button in MaterialUI?
- How do I get my React like button to increment when not liked, and then decrement when liked?
- How can you show a modal in react when you press the back button browser?
- how can i get proper type infer when useing union type with optional property as React props type
- How can strike a post out when i click the complete button in React
- How can I get "useState" to work properly when using event handlers for mouse events witin a React component?
- How can I render component that gets rendered when clicking a button to the top of the list instead of the bottom?
- How can I get a Material UI React Textfield to not be overlayed by text, when it has position sticky and it has been scrolled up?
- how can I get rid of these dark area when tapping the button on mobile devices
- How can I add the value of a button to a textarea when clicking the button?
- How can we make sure other <ListItem> components as collapsible when one <ListItem> component get expands under <List> react material ui component?
- React Conditional Rendering: How can hide the Button when the array "Name" has more than two values?
- How can i create a new div when i onclick the button in React js?
- React useContext returns undefined before requested object resulting in an error when trying to use .map(). How can I get rid of undefined?
- How can I pass id/class of a button present in a handlebar file into the typescript to launch a react modal when button is clicked
- How I can check the same conditon when Button is clicked in React JS?
- How can I get all the values from multiple select inputs on a button click? React
- How can I get input radio elements to horizontally align in react [material-ui]?
- How to know if react-router can go back to display back button in react app
- React Material UI: How to give a button a custom color when disabled?
- How can I get the device's ip on React Native?
- How to check when the react components get rendered or rerendered
More Query from same tag
- AssertionError while using gulp. 'Task function must be specified'
- Direct DOM acces when working with React-Redux
- Can I have a shared 'model' between 2 Redux states / reducers?
- Why does RxJS interval begin from last value but not from "0"?
- React - How to prevent re-fetching data when component re-renders?
- Webpack error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
- How to execute api call with redux?
- Dynamic routes not working in React with Caddy
- NextJS SWR multiple API calls returnin undefined
- React router how to click thru to detail components
- How to let the back end to know that the access token sent by user is valid
- Material UI Auto Complete Rotate icon on expand or collapse
- getting error Dropdown `value` must be an array when `multiple` is set
- How to trigger useEffect on initialization without changing the state in React?
- How can i extract more than one key from an Object and print the output
- React router 4 nesting routes alternative technique
- Handling array length in React
- How unperformant are anonymous functions in React component attributes?
- How to use react-intl 2 with redux?
- How do I properly dispatch actions inside the React Lifecycle Methods?
- Line7:1: parsing error: 'import' and 'export' may only appear at the top level
- How can I combine multiple loaders (CSS, LESS, ttf, etc) in NextJS config file?
- How to map a relay (graphql) connection to an edge's nodes using generics with Typescript
- React setState on textarea ignored
- how to sort the time and display the messages in a correct order
- Vite - change ouput directory of assets
- Deploy React website with node.js backend
- How to use asterisk in react native?
- How to fix onSubmit function not showing state when button clicked?
- how to use nested routing with react-native