So I have a component containing an input, and I need to access the value of this input through the main component like this:
//component declaration:
<MDTextField label='Password' type='password' ref='passwordField'/>
//reffing:
this.refs.passwordField
Can I do this in the first place? And if I can, how do I do this?
Code
const MDTextField = props => {
PropTypes.checkPropTypes(MDTextField.propTypes, props, 'prop', 'MDTextField');
const [isFocused, setFocused] = useState(false);
const [isEmpty, setEmpty] = useState(true);
const error = props.error;
const type = props.type.toLowerCase();
if(!type.match(/^(email|text|password|search)$/))
throw "Invalid type. Type must be either email, text, password or search."
console.log('error: ' + error + 'focus: ' + isFocused);
const _setFocus = () => {
setFocused(true);
};
const _setUnfocus = () => {
setFocused(false);
};
const _handleChange = e => {
setEmpty(e.target.value.length > 0 ? false : true);
};
return (
<div
{...props}
style={{borderColor: props.error ? "rgb(176, 0, 32)" : props.color && isFocused ? props.color : ""}}
className={`${props.outlined ? style.MDTextFieldOutlined : style.MDTextField} ${props.outlined ? palette.MDTextFieldOutlined : palette.MDTextField} ${props.className ? props.className : ''}`}
onFocus={_setFocus}
onBlur={_setUnfocus}
>
<label
className={`${style.Label} ${palette.Label}`}
style={{
color: error ? "rgb(176, 0, 32)" : props.accentColor && isFocused ? props.accentColor : "",
transform: isEmpty ? "" : `translateY(-${props.outlined ? "50" : "50"}%) scale(.75)`
}}
>
{(props.label ? props.label : '') + (error ? "*" : "")}
</label>
<span className={style.InputWrapper}>
<input
style={{caretColor: error ? "rgb(176, 0, 32)" : (props.accentColor ? props.accentColor : "")}}
className={`${style.TextInput} ${palette.TextInput}`}
onChange={_handleChange}
type={type}
/>
</span>
</div>
);
};
Top comments (5)
The way to do it with refs is
declare a
ref
variableconst fieldRef = React.useRef()
To access that ref use
fieldRef.current
But this is inside the same component, but I want to access it through a ref in the main component, so outside of the component that is containing the input field
You can do something like this
Main Component
Child Component
Ended up doing something I did not know the existence of and followed the react docs on this: reactjs.org/docs/forwarding-refs.h...
Yup this is exactly what I was talking about.