将antd输入分量从另一个分量集中

Question

import React from 'react'
import Input as InputAnt from 'antd'
class myInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return (
<InputAnt ref={this.inputRef}/>
)
}
}
export default myInput;

在这里，InputAnt确实得到了关注，但我担心的是：许多其他组件可以使用"myInput"组件来呈现输入以及许多其他组件。所以，也许我不希望输入在所有使用"myInput"组件的情况下都得到关注，我只想关注特定的场景，如何实现这一点？

Answer 1

使用myinput时只需传递一个附加道具。

<myInput shouldFocus />

在componentDidMount生命周期挂钩中：

componentDidMount() {
if (this.props.shouldFocus) {
this.inputRef.current.focus();     
}
}

当你想使用myInput但不想集中输入时，只需将其用作：

<myInput />