如何在 React 中将 ref 转发到其子组件并在挂载时更改设置状态？

Question

If anyone has appeared for Testdome react test then you will surely have come across this question.

The TextInput component renders an input element that accepts a ref forwarded to that input element. The Input component should accept a focused prop. When the focused prop is changed from false to true, and the input is not focused, it should receive the focus. Also, on componentDidMount lifecycle if the focused prop is true, then the input should receive the focus.

 class Input extends React.PureComponent { render() { let { forwardedRef, ...otherProps } = this.props; return <input { ...otherProps } ref = { forwardedRef } />; } } const TextInput = React.forwardRef((props, ref) => { return <Input { ...props } forwardedRef = { ref } /> }); class FocusableInput extends React.Component { ref = React.createRef() render() { return <TextInput ref = { this.ref } />; } // When the focused prop is changed from false to true, // and the input is not focused, it should receive focus. // If focused prop is true, the input should receive the focus. // Implement your solution below: componentDidUpdate(prevProps) { // The lifecycle will occur when component is mounted // If mounted then it will compare the current props with prevProps // If true then set the focus for the ref else false if (prevProps.focused !== this.props.focused) { this.ref.current.focus() } } componentDidMount() { // This lifecycle checks if component has mount for child // If mount then chck if child has focus if yes set the state to true/ false // for the current ref if (this.props.focused) { this.setState({ focused: this.ref.current.focus() }) } } } FocusableInput.defaultProps = { focused: false }; const App = (props) => < FocusableInput focused = { props.focused } />; document.body.innerHTML = "<div id='root'></div>"; const rootElement = document.getElementById("root"); ReactDOM.render( < App / > , rootElement);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>

Answer 1

 componentDidUpdate(prevProps) { // The lifecycle will occur when component is mounted // If mounted then it will compare the current props with prevProps // If true then set the focus for the ref else false if( prevProps.focused !== this.props.focused ) { this.ref.current.focus() } } componentDidMount() { // This lifecycle checks if component has mount for child // If mount then chck if child has focus if yes set the state to true/ false // for the current ref if(this.props.focused) { this.setState({ focused:this.ref.current.focus() }) } }