class Clicked extends React.Component{
mark(){
console.log('clicked');
}
render()
{
return (<a href="javascript:void(0)" onClick={this.mark.bind(this)}>click</a>)
}
}
Above click is not firing in Samsung native browser/
You should try React's synthetic touch events, specifically, onTouchStart.
However, using onTouchStart will invoke onClick, so you will either need a property that indicates that the event has fired (so onClick would get ignored), or, you can use different events altogether. such as:
render() {
return (
<a href="javascript:;"
onMouseUp={this.mark.bind(this)}
onTouchEnd={this.mark.bind(this)}>
click
</a>
)
}
Related
I am trying to display a div pop up on click of a span. Even though the code inside the function is executing, the div is not at all visible in the DOM.
Am not sure where I am going wrong.
<span id="test" onClick={()=>this.bindPopUpData("test")}>
Here I am calling the function to bind popup.
bindPopUpData=(dimension) =>{
return (
<div id="">
<div className="details_table">
<div className="close_popup">
<span className="icon-Close"></span>
</div>
</div>
</div>
);
}
-- Here I am trying to bind that popup
Can someone please tell where I am going wrong?
The issue is that your event handler is just returning a value, you're not telling the browser to put it anywhere.
Option 1: build the popup into the DOM with display:none and use your event handler to show/hide it.
Option 2: make your event handler inject the popup into the DOM with document.createElement and document.appendChild functionalities.
With React I'd recommend option 1 because you can make the popup a component and only render it if the parent component detects the event.
class myComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
showpopup: false
}
this.myHandler = this.myHandler.bind(this)
}
myHandler () {
this.setState({showpopup: !showpopup})
}
render () {
return (
<section>
<span onClick={this.myHandler}></span>
{this.state.showpopup ? <Popup /> : ''}
</section>
)}
}
I feel like this is a simple issue caused by my lack of experience with react, forgive me if I've over-complicated it.
Using npm 'react-youtube', I am trying to call event.target.pauseVideo() on the Video component whenever a specific parent state changes. I have a button which toggles the video component's div display to 'none' or 'block' when clicked, I want this button to also pause or play the video without having to re-render the Video component. I can call event.target.pauseVideo() inside the provided _onReady(){} or _onStateChange(){} with no issues, however I want it to be triggered when I press a button, not on either of those triggers.
I've tried creating my own method in the Video component which calls event.target.pauseVideo(), however I do not know how to trigger this from the parent (I think this is doable using refs, but everywhere I read says refs should not be used 99% of the time.) I've also tried passing event.target.pauseVideo() to the component from the parent, but this seems to try to use an event or target from the parent which doesn't exist instead of the Video component's.
Parent:
class Window extends React.Component {
constructor(props){
super(props)
this.state={
currentDisplay: 1,
isPaused: 0,
}
}
renderVideo(isPaused){
return <Video isPaused={isPaused}>;
}
render() {
return (
<div className='window'>
<div className = 'vid'>
{this.renderVideo(this.state.isPaused)}
</div>
<div className = 'PauseButton'>
<Pause handleClick={() => {this.togglePause()}}/>
</div>
</div>
);
}
}
togglePause() just changes the pause state from 0 to 1 and vice versa
Pause button Component:
class PauseButton extends React.Component{
render(){
return(
<button onClick={() => {this.props.handleClick()} }>
Pause
</button>
)
}
}
Video Component:
class Video extends React.Component{
_pause(event, isPaused){
if(isPaused = 1){event.target.pauseVideo()}
}
_onReady(event) {
//event.target.pauseVideo()
}
render(){
const opts = {
height: '390',
width: '640',
playerVars: { // https://developers.google.com/youtube/player_parameters
autoplay: 1,
}
}
return(
<YouTube
videoId= {'21X5lGlDOfg'}
opts={opts}
onReady={this._onReady}
onStateChange={this._onStateChange}
/>
)
}
}
Currently, the '_pause()' method in the video component is never triggered, but I would like it to be triggered whenever the pause button is clicked.
The code above plays the video without issues, however I am looking for a way to trigger the _pause() method in the Video component without having to re render the component.
Created a code sandbox with Video gettign paused when clicking pause button. Achieved using React Hooks.
https://codesandbox.io/s/elegant-cerf-0os7t
I am using React 16.1.1 (with the react-rails gem) in a Rails 5.1 app.
The React components on a specific page work fine, except when going back to this page with the browser 'back' button (tested with firefox / chrome / safari). In that case, the display is inconsistent with the state of the component. I've setup a demo of the problem: https://lit-bastion-28654.herokuapp.com/.
Steps to reproduce:
be on /page1
click the 'selection mode' button, it sets 'selectionMode' to true
click 'page 2'
use 'back' button to go back to page 1
EXPECTED BEHAVIOUR: the button is grey (selectionMode is reset to false when component loaded). OBSERVED BEHAVIOUR: the button is still blue?!
There, you can see that the button is blue, as if selectionMode was true, but the react browser plugin shows that selectionMode is false. The React browser plugin shows false information: it shows that the button does not have the 'btn-primary' class (which is normal if selectionMode is false), but you can obviously see that in the DOM, it has the 'btn-primary' class, since it is appears blue.
This is my code:
page1.html.erb:
<%= react_component("EditableCardList", { editable: true }) %>
editable_card_list.js.jsx:
class EditableCardList extends React.Component {
constructor(props) {
super(props);
this.state = {
selectionMode: false
};
this.toggleSelectionMode = this.toggleSelectionMode.bind(this);
}
toggleSelectionMode() {
this.setState(prevState => ({ selectionMode: !prevState.selectionMode }));
}
render() {
if (this.props.editable === true)
return (
<div>
<div className="row card-buttons">
<div className="col-md-12">
<div className="pull-left">
<ManageCardsButtons
selectionMode={this.state.selectionMode}
toggleSelectionMode={this.toggleSelectionMode}
/>
</div>
</div>
</div>
</div>
)
}
}
manage_cards_buttons.js.jsx:
class ManageCardsButtons extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<span>
<button type="button" className={`btn btn-default btn-sm ${this.props.selectionMode ? 'btn-primary' : ''}`} onClick={this.props.toggleSelectionMode}>Selection mode</button>
{ this.props.selectionMode && <span>selection mode</span> }
</span>
)
}
}
So my question is: How to make sure that, after using 'back' in the browser, the button is rerendered properly (and appears grey instead of blue)?
The issue may be related with turbolinks and caching, but I've not been able to figure it out yet.
React and TurboLinks conflict, so my final solution was to disable TurboLinks caching on that specific page.
When you go back to page1, Component rerenders, and sets the default selectionMode which is false in your case.
you can use redux.
you can save selectionMode to your
localStorage when it changes, and by default load it from the
storage.
I'm sure this is something trivial but I can't seem to figure out how to access the value of my button when the user clicks the button. When the page loads my list of buttons renders correctly with the unique values. When I click one of the buttons the function fires, however, the value returns undefined. Can someone show me what I'm doing wrong here?
Path: TestPage.jsx
import MyList from '../../components/MyList';
export default class TestPage extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleButtonClick(event) {
event.preventDefault();
console.log("button click", event.target.value);
}
render() {
return (
<div>
{this.props.lists.map((list) => (
<div key={list._id}>
<MyList
listCollection={list}
handleButtonClick={this.handleButtonClick}
/>
</div>
))}
</div>
);
}
}
Path: MyListComponent
const MyList = (props) => (
<div>
<Button onClick={props.handleButtonClick} value={props.listCollection._id}>{props.listCollection.title}</Button>
</div>
);
event.target.value is for getting values of HTML elements (like the content of an input box), not getting a React component's props. If would be easier if you just passed that value straight in:
handleButtonClick(value) {
console.log(value);
}
<Button onClick={() => props.handleButtonClick(props.listCollection._id)}>
{props.listCollection.title}
</Button>
It seems that you are not using the default button but instead some sort of customized component from another libray named Button.. if its a customezied component it wont work the same as the internatls might contain a button to render but when you are referencing the event you are doing it throug the Button component
I'm hoping to use the cross-browser React JS events listed in React Synthetic Events documentation.
I've created a small div, and am trying to capture the both mouse move (for non-touch) and click events:
....and the div...
<div id="mi-debug"
onClick={this.onClick}
onMouseMove={this.onMove}
>
The click/mouse move work fine on normal screens. On an iPad, no click event ever fires - on a tap, the "onMouseMove" event fires instead.
However, if I don't attach the onMouseMove event handler, the click event fires OK.
This is an older iPad, but I was hoping the cross-browser support advertised would handle this.
Any solutions?
Use this library to solve your react-tap-events Link is https://github.com/zilverline/react-tap-event-plugin
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
and in your render method
render: function() {
return (
<a
href="#"
onTouchTap={this.handleTouchTap}
onClick={this.handleClick}>
Tap Me
</a>
);
},