score:0
you can only pass one ref object into the child, but i don't think that should be a problem. both you and whoever uses your component should be able to access and use the same ref object.
so you'll just need to check if you were given a ref, and if not create your own. since hooks need to be called consistently, you'd want to always call useref, and then just sometimes use the passed in ref instead:
export default forwardref<htmlinputelement, props>(({ label, ...props }, ref) => {
const id = useid();
const inputref = useref(null);
ref = ref || inputref;
// ... more mechanics here, all referencing `ref`, not `inputref`
return (
<div>
<label htmlfor={id}>{label}</label>
<input {...props} id={id} ref={ref} />
</div>
);
});
score:0
you can use a callback ref to get the reference to the underlying node, and set both the passed ref and the input ref's current node.
export default forwardref<htmlinputelement, props>(
({ label, ...props }, ref) => {
const id = useid();
const inputref = useref(null);
const setbothrefs = node => {
ref = node;
inputref.current = node;
console.log(`inputref`, inputref, `ref=>`, ref);
};
return (
<div>
<label htmlfor={id}>{label}</label>
<input {...props} id={id} ref={setbothrefs} />
</div>
);
}
);
Source: stackoverflow.com
Related Query
- Is there a way to compose together refs with react?
- Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks
- Is there a way to apply a fade in/out transition with React suspense for the fallback component?
- Is there such a thing as a "correct" way of defining state with React hooks and Typescript?
- Is there a way to upload a file in React Dropzone with Puppeteer?
- Is there a way to have a React child component displayed as a string, with indentations, returns, and with jsx syntactic sugar?
- Is there a way to make optional React props types cleaner with Typescript?
- Is there a way with React Slick to have a Carousel inside a Carousel?
- Is there any way to crop videos in JavaScript with a crop box, without using React or Vue?
- Is there a valid way to use redux with react without react-redux?
- Is there a way to handle react useQuery with status code 401 without 10 seconds of loading time?
- Is there a way to set defaultValues in a child component using react hook form with useFieldArray hook - not using the useForm hook?
- Is there a way to "Break out" of a react app with a relative link
- In React is there a way to remount a component with a button click from another component?
- Is there a way to load react library files separately and not in the bundled files when using react with babel, webpack and gulp as building tool?
- Is there any way to block user navigation with out any prompt in react
- React Leaflet: Is there a way to make an onClick method that adds a marker and also updates the state with that markers' location? (Beginner React)
- Is there a way to redirect to a default url hash with React Router?
- How do I reset a field with a button and is there a more concise way of writing this React
- Is there a way to link to a new page with react router?
- React with Redux: is there a way to sync the "same" components?
- Is there a better way to organize this React page with an async call to the API?
- Is there a way to use the Gatsby page query or static query with the React Context API?
- Is there a way to cache data coming from redux connect in React function component with using useRef()?
- Is there a way to not reload the whole html body with React Routers?
- Is there way to hide/show form field in react in other component or js file just with field ID or name?
- Is there any way to store the files locally on computer using react with electron
- Is there a way in React to execute only part of the render function multiple times, while the other part keeps going with initial execution?
- Is there a way to use react multiple select with this
- React/Redux: Is there a way to clear react date-picker when it's incorporated with redux-form?
More Query from same tag
- How can I render different news components into the Navbar Component & display their data on the Navbar page, On Click of Navbar menu links
- How do I make my React Components to be responsive via css media queries?
- React/Redux : Detect and exectute instructions before component destruction
- Passing parameter without url to Component in Router
- Trying to disable the future steps in Step
- Material UI stepper with React
- Context and childContextTypes
- What is the correct way to handle an accesstoken with react to secure routes?
- Redux-form Field-Level Validation & error translation with React-intl
- Rendering a react component variable with react router v6
- Converting the values iso languages code in languages with React
- How to get data from backend express server to frontend react app and vice versa
- Reactstrap changing active NavLink onClick
- React: Element type is invalid
- How to wrap _app.js within multiple providers?
- Using Radar Chart inside react component
- React fullCalendar - Interaction not working
- How to force tab to fit to small space in Material UI?
- Changing the backgroundColor of react mateial-ui Select MuiList
- smooth scrolling with a bootstrap navbar in react js
- How to filter array from a stacked array in react
- How to access pages with a click through the menu
- Screenshot created by use-react-screenshot is not assigning to useState
- How to get JSON from REACT JS to implement in NODE js
- Component written as a class not rendering
- How to overwrite default props of a higher order component?
- State not updating in SunEditor onChange event
- copying data from one array to another array
- How to set initial state of child component based on parent component's API call?
- HttpOnly cookies are not sent with request to server