score:19
Accepted answer
there isn't any good way of doing this. you can use something like this. but, if you pass more than one child here, all of them will respond to this click handler! so, you should think of another logic to use this button
. as in this state, your childrencomponent
is so generic.
so, what will your button
component do? you can create a component with this click handler and all other parts can be passed as props. maybe in this way you can use it in multiple places.
const app = () => (
<div>
<childcomponent>
<button>click</button>
</childcomponent>
</div>
);
const childcomponent = ( props ) => {
const handleclick = () => console.log( "clicked" );
return (
<div>
{ react.cloneelement( props.children, { onclick: handleclick } ) }
</div>
);
};
reactdom.render(
<app />,
document.getelementbyid("root")
);
<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:0
function child(props, ref) {
useimperativehandle(ref, () => ({
onclick: () => {
//do something
}
}));
return <div>child</div>;
}
child = forwardref(child);
function parent(props) {
childref = useref()
//here you can call it fom parent
childref.current.focus()
return (
<child ref={childref} />
)
}
Source: stackoverflow.com
Related Query
- Adding a click handler to React children for methods on the child component
- React component setting the onClick of it's child ... how to make it work for all kinds of children
- What is the correct way of adding a dependency to react in your package.json for a react component
- If the props for a child component are unchanged, does React still re-render it?
- How is an argument for a callback in React being passed from the child component to the parent component?
- How can we write a click handler for a Stateless Function Component in React JS
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- My button needs to be clicked twice to render the new component for the first click React
- Maintain the context data for each child component on React router change
- Typing the click handler when component is generic (polymorphic react component)
- Change the state of parent component on click of a child component with a specific key in React JS
- React click handler passed to child component is not working
- React - click handler on child component with map not working
- Implement "show more, show less" in React component when using map for adding the components
- In React is it possible to pass a prop through a component and have it act as the prop name for a child component
- How to test the child component render text after the button on the parent component click with react testing library?
- React multiple children seem to be sharing the component handler function
- What is the 'condition' type for react component children props?
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- Figuring out how to mock the window size changing for a react component test
- Accessing React component children props from the parent
- Can a react component have multiple areas for child content?
- onChange event for React child component to update state
- Adding border only to the one side of the <Text/> component in React Native (iOS)
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- The right React Component PropTypes for es6 (Weak) Maps, Sets
- How to pass an event handler to a child component in React
- Passing a function with React Context API to child component nested deep in the tree
- What is the correct type for React Click Event?
- Scroll page to the nested React component on a button click
More Query from same tag
- How do I avoid passing the same prop to every component?
- React Materialize Change input type from "password" to "new-password"
- how to translate searchPlaceholder of MaterialTable reactjs using FormattedMessage
- Page goes blank when I try to use a certain component
- return the item in an array of objects within an array of objects
- Can't re-render after update in React
- Refresh in react page redirect it to /404 page
- Dynamic page title with ReactJS
- Unable to render the button selected in react
- React JS need to get data from one page to other
- How to change state of a single component in ReactJS without rendering the whole component again?
- React re-render restarting video
- VISX avoid floats on Y axis
- How to setState of a sibling component in react with context?
- Turning props into state after initialisation with GetDerivedStateFromProps?
- Are difference between named arrow function and anonymous arrow function in JSX Props?
- React + Polymer: Pass through callback from React into Polymer component
- unexpected react component state value change
- Displaying API data from an array within the response
- How to I fill a nested array with setState?
- react router dom pushing user before finishing action
- babel watch SyntaxError: Unexpected token
- React Router - one of two routes
- Meteor, ReactJS, MongoDB: Do something when user leaves page
- HandleChange Redux
- Getting router parameters in Store using Alt and React-Router
- Cryptic error when deploying Typescript-React App to Heroku
- Render custom HTML markup inside pdf document using react-pdf/render library
- React JS - Clear child forms on Tab clicks
- How to determine when state has finished updating?