logo
down
shadow

React component only changes state on second onClick event


React component only changes state on second onClick event

By : user4580099
Date : November 28 2020, 09:01 AM
wish helps you I have these two simplified React components, where the Times component is a child of the Create component (see below for code samples). The expected behavior is that initially, the Times component is not shown, but when the user clicks on the link with onClick, the Times component appears. , The problem is here.
code :
 componentWillReceiveProps: function() {
    if (this.props.shouldShow === false) {
      this.setState({display: 'none'});
    } else {
      this.setState({display: 'block'});
    }
  }
 componentWillReceiveProps: function(newProps) {
    if (newProps.shouldShow === false) {
      this.setState({display: 'none'});
    } else {
      this.setState({display: 'block'});
    }
  }
   var Times = React.createClass({

  propTypes: {
    shouldShow: React.PropTypes.bool.isRequired
  },

  getDefaultProps: function () {
    return {shouldShow: false};
  },

  getInitialState: function () {
    return {el: 'times'};
  },



  render: function () {
    let display = this.props.shouldShow ? "block" : "none";
    return (
      <div id={this.state.el} style={{"display": display}}>
        <h1>Times</h1>
      </div>
    );
  }
});


Share : facebook icon twitter icon
Changing state of component with OnClick in React

Changing state of component with OnClick in React


By : Mark
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Put navbarValue in a state object and update the state onClick. You don't need if/else statements here. Because your components will be rerendered on state update.
Like this: https://stackoverflow.com/a/45134876/4953199
Cancel onClick event of parent component in child component in React

Cancel onClick event of parent component in child component in React


By : Charlie Scruggs
Date : March 29 2020, 07:55 AM
With these it helps You should add the line e.stopPropagation(); to the top of your this.doSomethingElse event handler.
Event.stopPropagation().
code :
doSomethingElse( e ) {
  e.stopPropagation();
  // ... do stuff
}
Hide component onClick using state with React

Hide component onClick using state with React


By : Ethan Dale
Date : March 29 2020, 07:55 AM
around this issue I'm trying to hide StickyFooterDynamic onCLick. I've managed to hide it with css but I'd like to use React's state to completely remove it from the DOM onClick. Does anyone have a suggestion on how to do this? ES6 way. , You can toggle inner state and return null instead:
code :
class StickyFooterDynamic extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      visible: true,
    }

    this.onClick = this.onClick.bind(this)
  }

  onClick(event) {
    event.preventDefault()

    this.setState(prevState => ({
      visible: !prevState.visible,
    }))
  }

  render() {
    if (!this.state.visible) {
      return null
    }

    const { url, service } = this.props

    return (
      <StickyFooter>
        ...
        <a href="#" className='sticky-footer-close' onClick={this.onClick}></a>
      </StickyFooter>
    )
  }
}
change state for onClick event in other component react

change state for onClick event in other component react


By : RegSeg
Date : March 29 2020, 07:55 AM
Hope this helps You can pass a callback from the Header component as a prop to Sidebar which in turn passes that callback to Navigation as a prop.
In React you usually have a differentiation between presentation components and components containing logic (often referred to as "container components"). You can put all the states in there and and pass the necessary callbacks as props to the presentation components.
code :
class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mobileOpen: false,
    };
  }

  // Create a callback to toggle the `mobileOpen` state
  onMenuItemClicked = () => {
    this.setState({mobileOpen: !this.state.mobileOpen});
  }

  render() {
    return (
      <Sidebar
        open={this.state.mobileOpen}
        /* pass callback to Sidebar */
        onMenuItemClicked={this.onMenuItemClicked}
      />
    );
  }
}
function Sidebar({ open, onMenuItemClicked }) {
  return (
    <Navigation
      open={open}
      /* pass callback from Header to Navigation */
      onMenuItemClicked={onMenuItemClicked}
    />
  );
}
class Navigation extends Component {
  render() {
    // finally use the callback
    return (
       <MenuItem onClick={() => this.props.onMenuItemClicked()}>text</MenuItem>
    );
  }
}
How to trigger an event in Parent Component from Child Component onClick() using React Hooks?

How to trigger an event in Parent Component from Child Component onClick() using React Hooks?


By : user3333317
Date : March 29 2020, 07:55 AM
Hope this helps The example below demonstrates how you pass events through components. The example is pretty straight forward, but let me know if you have any questions.
If you do not want to deal with 'chaining' events, and having to pass them through components - you can look more into the Context API or React Redux, as they both have a "global" concept of state and handlers (aka reducers).
code :
const { render } = ReactDOM;

/**
 * Child2
 */
function Child2({ Open, close, events, onChild2Event }) {
  const handleEvent = event => {
    // Pass event to caller via the onChild2Event prop.
    // You can do something with the event, or just pass it.
    console.log("1. Event fired in Child2! Doing something with event before passing..");
    onChild2Event(event);
  };

  return <button onClick={handleEvent}>Child 2 Button</button>;
}


/**
 * Child1
 */
function Child1({ open, close, events, onChild1Event }) {
  const handleEvent = event => {
    // Pass event to caller via the onChild1Event prop.
    // You could so something with the event or just pass it again.
    console.log("2. Event fired in Child1! Doing something with event in Child1..");
    onChild1Event(event);
  };

  return <Child2 onChild2Event={handleEvent} />;
}


/**
 * Parent
 */
function Parent({ open, close, events }) {
  // ~~ This is the "final function" you wish to invoke when Child2 button is clicked ~~
  const functionToInvokeInParent_WhenChild2ButtonIsClicked = () => {
    console.log("   -- I am the final function you wish to invoke in Parent, when Child2 button is clicked!");
  }
  
  const handleEvent = event => {
    // Handle event in Parent which originated from Child2
    console.log("3. **Handling event in Parent! About to invoke the function you wish to call in Parent:**");
    functionToInvokeInParent_WhenChild2ButtonIsClicked();
  };

  return (
    <div>
      <p>Open your console, then click the button below.</p>
      <Child1 onChild1Event={handleEvent} />
    </div>
  );
}

render(<Parent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
Related Posts Related Posts :
  • CRM 2013 Limit the date field
  • fancybox - changing close button color
  • Ember-notify giving error can't read property "Service" of undefined
  • Passport-init.js authentication is not working in nodejs
  • Branch.io Cordova API - init() fails on Android Device
  • appending HTML codes to an elements using js
  • Css animation to extend button text on hover
  • I want to restrict HTML input autocomplete to 3 letter minimum
  • tinyMCE editor not updating on the fly
  • typescript kendo-ui call method from string
  • HttpCompileException was unhandled by user code (when i am adding c# code in script)
  • Send form data as array of objects to controller in asp.net mvc
  • Javascript, multi file modules and Require.Js
  • how to render a complete new template and leave the application template in ember
  • Hover unrelated divs
  • Permute string until it matches some input?
  • How to fire JQuery change event when input value changed programmatically?
  • AJAX: POST data to a different url
  • checkbox column in jquery datatable
  • Document.evaluate for documents without namespaceURI crashes Microsoft Edge
  • Bootstrap Menu with "More" option Responsive issue
  • Standard inputs not being added to Angularjs Form $Scope
  • Express promise throw error
  • onclick and get in jquery
  • How to get the country code from Google Places API
  • Passing parameters url in Select2
  • Is there any frame work for Marklogic to write javascript code?
  • How to implement a boostrap template over bootstrap-sass gem
  • Why fixed div comes out when horizontally scrolled?
  • How to limit scope of a function in javascript/ jquery
  • Overlapping legend d3.js
  • Apply transition to div
  • Javascript game help - counting with dice
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co