React焦点无法修改问题

#1

在使用react-redux组件过程中，发现打印document.activeElement，一直就是document.body，无法修改当前获得元素的焦点？有朋友遇到这种问题么？

#2

听上去正常啊. 你希望怎么样?

#3

因为是redux外面包裹了一层container,希望当前的焦点是在组件上，也就是

this.element = ReactDOM.findDOMNode(this);
this.element.focus();

但是后面这一句是失效的，焦点并没有在当前组件上面，打印发现当前的document.activeElement还是在body上面

#4

不清楚, 但是设计到你自己的逻辑, 需要把相关代码贴上来, 不然也猜不出来问题在哪.

#5

redux.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Main from './components/main/Main';
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <AttentionContainer />
    </Provider>,
    document.getElementById('app')
);

AttentionContainer.js

import { connect } from 'react-redux';
import AttentionScreen from '../components/AttentionScreen/AttentionScreen';

const mapStateToProps = (state) => ({
    // 从 store 取得 message state
    message: state.getIn(['message', 'message'])
});

const mapDispatchToProps = null;

/*react-redux 所提供的 API connect 将 props 传给 Component，其用法如下：
 * connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
 * */
export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(AttentionScreen);

AttentionScreen.js

import React from 'react';
import ReactDOM from 'react-dom';
import BaseComponent from 'base-component';
import SoftKeyStore from 'soft-key-store';
import ReactSoftKey from 'react-soft-key';
import SimpleNavigationHelper from 'simple-navigation-helper';

export default class AttentionScreen extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
          message: props.message
        };
    }

    componentDidMount() {
        console.log('AttentionScreen componentDidMount.');
        this.element = ReactDOM.findDOMNode(this);
        if (document.activeElement === document.body) {
            this.element.focus();
            ReactDOM.findDOMNode(this.refs.softkey).focus();
        }

        console.log(' WWE--1--> ' + this.element.innerHTML);
        console.log(' WWE--2--> ' + document.activeElement.innerHTML);
        console.log(' WWE--3--> ' + document.body.innerHTML);
        SoftKeyStore.register({
            left: 'delete',
            center: 'tcl-cmas-ok',
            right: 'options'
        }, this.element);
        document.addEventListener('keydown', this);
    }

    handleEvent(event) {
        console.log('cuisx:: event.key -> ' + event.key);
        switch(event.key) {
            case 'Enter':

                break;
            case 'SoftLeft':

                break;
            case 'SoftRight':

                break;
            case 'BrowserBack':
            case 'Backspace':
                window.close();
                break;
        }
    }

    render() {
        return(
        <form role="dialog" data-type="confirm">
        <section>
            <h1 data-l10n-id="emergency-alerts">{this.state.message.get('title')}</h1>
            <div id="container">
                <div id="icon"></div>
                <p id="alert-content">{this.state.message.get('body')}</p>
            </div>
        </section>
        <ReactSoftKey ref="softkey" />
        </form>);
    }
}
#6

问题指向-> AttentionScreen.js里面的componentDidMount函数this.element.focus()，无法设定焦点

#7

第一次见这么牛逼的写法

#8

直接用ref取得然后focus。你这种写法的思路是什么，没太理解，事件代理应该也不是这么写的吧

#9

已解决，应该是虚拟DOM树的原因，直接在UI绘制完成后，监听body是否已经加载完成，只有dom树加载完成后才可以附着焦点．

document.body.onload = function(){
  document.querySelector('#alert-content').focus();
}
#10

用ref应该就不存在onload的问题