score:2
if i´m reading correctly you want to access the input
element from the parent component?
you have to use another name for your prop as ref
is a keyword prop which will automatically assign the component the given variable.
<childcomponent inputref={this.setref} handlechange={this.handlechange.bind(this)}/>
class childcomponent extends component {
render() {
return(
<input type="text" ref={this.props.inputref} onchange= {this.props.handlechange.bind(this)} > </input>
);
}
}
based on how you want to access the ref you can either set this.refs
directly to the prop or set it inside your setref
function.
// either `this.refs` and then usable through `this.refs.current`
<childcomponent inputref={this.refs} {...} />
// or `this.setref` and assign it yourself
setref = (ref) => {this.refs = ref;}
score:0
ref
work only on native dom element, to make ref work on user defined component, you need this:
score:2
ref
(as well as key
btw) is very special prop. it is not accessible in child by this.props.ref
.
shortest way is to use different prop to pass ref
forward and backward:
class parent ...
render() {
...
<child inputref={this.inputref} />
class child
...
render() {
<input ref={this.props.inputref} ...
it's most flexible since you may access different ref
inside you child component(e.g. inputref
+ scrollablecontainerref
+ popupref
)
but in some cases you want to compose new component for existing code base. say <input>
's replacement. sure, in this case you would avoid changing all <input ref={...} />
onto <myinput refprop={...}>
.
here you may use react.forwardref
. it feels the best with functional components like
export child = react.forwardref((props, forwardedref) => {
...
return ...
<input ref={forwardedref} />
})
but for class-based component you would rather use ref-prop
with different name:
class child
...
render()
return
...
<input ref={this.props.forwardedrefname} />
export childwithforwardref = react.forwardref((props, ref) => <child forwardedrefname={ref} {...props} />)
ps since you will consume what forwardref
returns rather initial component(child
) you may want to specify displayname
for it. this way you may be able find it later say with enzyme's find()
or easy recognize element in browser's react devtools
Source: stackoverflow.com
Related Query
- How to get the ref of a child component inside parent component in ReactJS
- How to get the ref from a Mobiscroll child component into the parent
- How to get the DOM ref of a child class component in a parent class component
- How to get the event target inside the parent component in ReactJS
- React - Get the ref present in child component in the parent component
- How to change the background color of a parent component from inside a child component in react, gatsby
- How do I get the Age data from child to parent component
- Need Reactjs help on how to properly pass this function from the parent to child button component
- In ReactJS how would I bind "this" to the parent component inside a map() function
- How do I get the value in the parent from a child components <select> in ReactJS onSubmit()
- How do I get the state of the parent component in a child styled component using tagged template literals?
- ReactJS - how to create a dynamic ref from the parent. The child is a functional component
- How to write all these three functions in Parent Component instead of writing in the child component - ReactJS
- How to get the return value of parent function to child component in react (Using props)
- How to get a child component to control the parent in react?
- How to access method of the child component from parent in reactjs
- How to pass the changed state from child component to its parent in ReactJS
- ReactJS - how to fetch inside a child component with details passed on by props from a parent component?
- How to access props from Parent Component inside the Child Class Component ? (specifically for componentDidMount)?
- How to set the state of parent component in react from inside child component
- How to get all the child elements inside a component in unit test using react and enzyme?
- Get consolidated data from all the child components in the form of an object inside a parent component : React JS
- ReactJS - How to pass data from child to parent component & parent to child component on the same event?
- How can I call the function of a parent component inside of a child component?
- How do I get the state array of a child component to a parent component in react?
- How do I access refs of a child component in the parent component
- ReactJS - React.Children.forEach - Can I get the child component name?
- react - how do I get the size of a component child elements and reposition them
- How to get the DOM node from a Class Component ref with the React.createRef() API
- How to get the ReactJS element inside componentDidMount()?
More Query from same tag
- How to test `NavLink` with Mocha from react-router-dom
- How to setState in reducer - React
- Render & animate SVG from file that already includes animation
- Change props depending on breakpoint with SSR support
- state value is empty despite assigning value from res.data
- CSS - preventing child element inheriting cancelling out transform property of parent element
- Add value from input into array is not working in React
- concatenation setState with dynamic key in react using es6
- How does Redux Reselect memoization work?
- Compiled with problems 'firebase' is not defined
- JavaScript - Replace a string with anchor tag while fetching data from JSON Array
- router.errorHandler() not triggered in Quarkus
- NextJS - how to render pages in SSR mode on one environment and Static pages on another environment
- how to properly use the async and await keywords within a map
- React useState - update all object values to true
- Is there a solution or package for this design with React js?
- How render specific data from axios call in Reactjs
- Secure communication from React Landing Page with Rails Backend?
- How to alter deeply nested children?
- onBlur doesn't fire when onClick is triggered programmatically
- Draft-JS Mention Plugin - Change Mentions Object K/V
- Interate through multiple nested arrays in Javascript
- How to access user profile in auth0
- Use env variable in helper file (Gatsby)
- I am trying to refactor This code to a functional component
- Not able to pass array of data to chart.js in React
- React Router Dom V6
- How to use the EventListener Type in React?
- Player is not updated
- Getting error TypeError: Cannot read property 'id' of undefined using React/Redux action