Question

我有一个DIV切换元素，我想在它打开时专注于它（滚动）。

我跟随doc和tabindex="-1"并没有任何作用。

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            formVisible: false
        }

        this.formRef = React.createRef();

        this.onReply = this.onReply.bind(this);
    }

    onReply(e) {
        this.formRef.current.focus(); // doesn't have any effect

        this.setState({formVisible: true});
    }

    render() {
        return (
        <div>
            <div>
                <a onClick={this.onReply} href="#">Reply</a>
            </div>
            <div>
            ....
            </div>

            <div ref={this.formRef} tabindex="-1">
            {this.state.formVisible &&
               <form>
               ...
               </form>
            }
            </div>
        </div>
        );
    }
}

到目前为止，我使用的是锚点，但我觉得这种解决方案不是很优雅...

...
<a onClick={this.onReply} href="#form">Reply</a>
...
<a name="form"></a>
{this.state.formVisible &&
...

锚定方法的另一个问题是，页面上有更多动态创建的元素。然后我必须为锚使用某种ID，这很复杂：

const {id} = this.props.data;
...
<a onClick={this.onReply} href={"#form-" + id}>Reply</a>
...
<a name={"form-" + id}></a>
{this.state.formVisible &&
...

Answer 1

由于仅当true为componentDidUpdate时才呈现表单，因此您需要等到重新呈现组件后才能滚动到它。将componentDidUpdate(prevProps) { // `formVisible` went from false -> true, scroll the <form> into view if (!prevProps.formVisible && this.props.formVisible) { this.formRef.current.scrollIntoView(); } }与scrollIntoView结合使用：

Questionnaire

专注于（滚动到）React中的DIV元素

1 个答案: