score:9
solution #1
using subjects:fiddle
const state = new rx.subject()
.debouncetime(1000)
.scan((acc) => {
return ++acc
}, 0).do(::console.log)
const handler = (e) => {
state.next(e)
}
state.startwith(0).subscribe((clicks) => {
reactdom.render(<button onclick={handler}>clicked {clicks}</button>, document.queryselector('#app'))
})
solution #2
using rxjs's fromevent: fiddle
// intial render so element exists in dom (there is probably a better pattern)
reactdom.render( <button id='clickme'>click me</button>, document.queryselector('#app'))
const clicks = rx.observable
.fromevent(document.getelementbyid('clickme'), 'click')
.do(::console.log)
.debouncetime(1000)
.scan((acc) => {
return ++acc
}, 0)
clicks.subscribe((clicks) => {
reactdom.render( <button id='clickme'>click me {clicks}</button>, document.queryselector('#app'))
})
solution #3
note: highly experimental, and just something i tried to do for fun.
this is more for an action based architecture, where you have actions that change your state (flux). this is a handler that is fully standalone. it is used with a custom operator 'fromeventargs': fiddle (look at the console)
const handler = (e) => {
rx.observable
.fromeventargs(e, 'uniquekey')
.debouncetime(1000)
.subscribe(x => console.log('send an action', x))
}
score:0
i keep getting to this question, while i prefer this solution from another one.
copied below for simplicity. please upvote the original.
you will need to cretae observable from change events(for example using subject) and then debounce on that.
here is the fully featured example for you:
class search extends react.component {
constructor(props) {
super(props);
this.state = {
search: '',
debounced: '',
};
this.onsearch$ = new rx.subject();
this.onsearch = this.onsearch.bind(this);
}
componentdidmount(){
this.subscription = this.onsearch$
.debouncetime(300)
.subscribe(debounced => this.setstate({ debounced }));
}
componentwillunmount() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
onsearch(e) {
const search = e.target.value;
this.setstate({ search });
this.onsearch$.next(search);
}
render() {
const { search, debounced } = this.state;
return (
<div>
<input type="text" value={search} onchange={this.onsearch} />
<div>debounced value: {debounced}</div>
</div>
);
}
}
reactdom.render(
<search />,
document.getelementbyid('root')
);
<script src="https://unpkg.com/rxjs@5.4.0/bundles/rx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
score:2
try like this:
class myscene extends react.component {
constructor(props) {
var onchangetextobservable = rx.observable.fromeventpattern(
(handler) => {this.onchangetext = handler}
);
onchangetextobservable.subscribe(x => console.log(x));
}
render() {
return (
<textinput onchangetext={this.onchangetext}>
)
}
}
score:8
based on omerts propositions, (especially solution #1) here is my final code
input: rx.subject<any>;
constuctor(...){
this.input = new rx.subject();
this.input.debounce(1000).subscribe(this.processinput);
}
handlechange = event => {
event.persist();
this.input.onnext(event);
};
processinput = x => {
// invoke redux/flux action to update the state
}
render(){
...
<input onchange={this.handlechange} ... />
...
}
Source: stackoverflow.com
Related Query
- How to debounce user input in reactjs using rxjs
- How to dynamically generate pair of input fields using reactjs
- How to set a defaultChecked to only first input in radio button when using map function in reactjs
- How to make an array.length counter update on user scroll using ReactJS
- How to set focus on custom input in ReactJS using useRef and react hooks?
- user input to create pie chart using reactjs from form
- How to list all suggestions and filtered suggestions based on user input using reactjs?
- How to get Current User using ReactJs
- How to know if a user is connected to cellular network or wifi using reactjs
- How to properly display user is typing using ReactJS
- How to automatically take a '/' (slash) in input field using reactJS
- how to send a user onClick event to different endpoint urls based on the button clicked using ReactJS and Axios
- How to disable a button if the user entered input is not valid email using javascript and react?
- How can i restrict user from not selecting other file types using input type file with react and typescript?
- How to show only icon to the particular user when we click on it using reactjs
- How to add user input objects to arrays in React using useState
- How can i simplify the user suggestion dropdown based on input using react?
- How to store and pass the user input value using <button> tag in React.js?
- How to update input value using ref in ReactJS
- How to show first letters of the firstname and lastname of the user in the list instead of image through json data using reactjs
- How to only play sound when user submit data using reactjs
- How to filter the entire array based on user input using filter in JavaScript ?
- How to filter the data per row? Using a search input method, instantly update the rows based on what user inputs in react.js
- Using ReactJS how do rows with input text fields maintain state after being sorted
- How do I get input from user by using <button> and <input> in React?
- How to save the input from user given using html input tag to a array in "state" in React JS
- how to make sure to get the latest values of input when using useState hook in ReactJs
- How to Redirect pages in reactjs when user succesfully logs in using passportjs
- How to check if the user entered input in input field has the string in format '10h' or '10m' using react and javascript?
- How to disable the input field while clicking on checkbox using reactjs
More Query from same tag
- How to read in a http status of a request made outside of a React app?
- Having a hard time updating an array of objects in the state
- Custom Route with React Router 4
- Shift objects when even is triggered in React (Carousel with differing widths)
- Property 'listen' does not exist on type 'NavigateFunction'
- How to assert an attribute's rendered value?
- why axios return promise error in reactjs
- How to load face-api.js shard models in a hosted environment on AWS Amplify?
- Testing with jest+enzyme, mock functions is called twice for no reason
- Separate vertically elements with space between in Material UI drawer
- setting css specific to element in map function
- React-bootstrap-router LinkContainer doesn't route anywhere
- Is there a way to make react context read only?
- React: Change width of progress bar from state
- Cant Update The state after getting data from the input React js
- React setting state inside function on componentDidMount() passing parameters to be updated
- Post form data from React handle submit function to python API?
- How to set customized color for a Text component with styled-components?
- Replace fetched search results on each new search in react-infinite-scroll-component
- How to trick react router into thinking `/` is the mount directory?
- Which approach is good to update State of the Component in React
- How can I make React Portal work with React Hook?
- JSON strings not displaying in JSX
- How to return true or false using the input checkbox in react js?
- react add setTimeout to loading
- How do I convert this class component into function component?
- Grid columns too far apart
- Using React state, how can I remove markers from a Google map before adding new ones?
- How can I set the state of my parent component from the child component when using react-router?
- React Error : is declared but its value is never read. [6133]