Question

textinput组件在dom中呈现一个输入元素，并接受转发到该输入元素的ref。完成FocusableInput组件：

该组件应接受重点突出的道具。当焦点道具从false更改为true并且输入没有焦点时，它应该接收焦点

如果在安装聚焦道具时为真，则输入应获得焦点。

我不明白这个问题。请解释。

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) {}

  componentDidMount() {}
}

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);

有人可以解释一下我要我做什么吗？

0 个答案: