반응 난 그냥이 문제에 달려 내가 사용하고 15.0.1 15.0.2을 내가 ES6 구문을 사용하고 있는데 꽤 15 절은 몇 주 전에 떨어 이후로는 다른 답변에서 필요한 것을 얻을하지 않았다 this.refs특성을 더 이상 사용되지 않고 제거되었습니다 .

일반적으로 필요한 것은 다음과 같습니다.

1. 구성 요소가 장착 될 때 첫 번째 입력 (필드) 요소의 초점을 맞 춥니 다
2. 오류가있는 첫 번째 입력 (필드) 요소에 초점을 맞 춥니 다 (제출 후)

나는 사용하고있다 :

• 반응 컨테이너 / 프레젠테이션 구성 요소
• 리덕스
• 반응 라우터

첫 번째 입력 요소에 집중

페이지 autoFocus={true}의 첫 번째 부분 <input />을 사용 하여 구성 요소가 마운트 될 때 포커스를 얻습니다.

오류가있는 첫 번째 입력 요소에 초점 맞추기

시간이 더 걸리고 더 복잡해졌습니다. 간결한 솔루션과 관련이없는 코드를 보관하고 있습니다.

Redux Store / 주

포커스를 설정해야하는지, 포커스를 설정해야하는지 확인하려면 전역 상태가 필요하므로 구성 요소를 다시 렌더링 할 때 포커스를 다시 설정하지 않습니다 ( componentDidUpdate()포커스 설정을 확인하는 데 사용합니다). )

응용 프로그램에 적합하게 설계 될 수 있습니다.

{
    form: {
        resetFocus: false,
    }
}

컨테이너 구성 요소

구성 요소 resetfocus에 포커스를 설정 하면 속성을 설정하고 속성을 지우려면 콜백 이 필요 합니다.

또한 내 프로젝트는 상당히 크기 때문에 액션 크리에이터를 별도의 파일로 구성했으며 더 관리하기 쉬운 덩어리로 나누고 싶었습니다.

import { connect } from 'react-redux';
import MyField from '../presentation/MyField';
import ActionCreator from '../actions/action-creators';

function mapStateToProps(state) {
    return {
        resetFocus: state.form.resetFocus
    }
}

function mapDispatchToProps(dispatch) {
    return {
        clearResetFocus() {
            dispatch(ActionCreator.clearResetFocus());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyField);

프리젠 테이션 컴포넌트

import React, { PropTypes } form 'react';

export default class MyField extends React.Component {
    // don't forget to .bind(this)
    constructor(props) {
        super(props);
        this._handleRef = this._handleRef.bind(this);
    }

    // This is not called on the initial render so
    // this._input will be set before this get called
    componentDidUpdate() {
        if(!this.props.resetFocus) {
            return false;
        }

        if(this.shouldfocus()) {
            this._input.focus();
            this.props.clearResetFocus();
        }
    }

    // When the component mounts, it will save a 
    // reference to itself as _input, which we'll
    // be able to call in subsequent componentDidUpdate()
    // calls if we need to set focus.
    _handleRef(c) {
        this._input = c;
    }

    // Whatever logic you need to determine if this
    // component should get focus
    shouldFocus() {
        // ...
    }

    // pass the _handleRef callback so we can access 
    // a reference of this element in other component methods
    render() {
        return (
            <input ref={this._handleRef} type="text" />
        );
    }
}

Myfield.propTypes = {
    clearResetFocus: PropTypes.func,
    resetFocus: PropTypes.bool
}

개요

일반적인 아이디어는 오류가있을 수 있고 집중 될 수있는 각 양식 필드가 자체를 점검하고 자체에 초점을 설정해야하는지 여부입니다.

주어진 필드가 포커스를 설정하기에 적합한 필드인지 확인하기 위해 발생해야하는 비즈니스 로직이 있습니다. 개별 응용 프로그램에 따라 다르므로 표시되지 않습니다.

양식이 제출되면 해당 이벤트는 글로벌 포커스 플래그 resetFocus를 true 로 설정해야 합니다. 그런 다음 각 구성 요소가 자체적으로 업데이트 될 때 포커스가 있는지 확인하고, 그렇다면 포커스를 재설정하기 위해 이벤트를 전달하여 다른 요소가 계속 확인하지 않아도됩니다.

편집
보조 노트로서, 나는 “유틸리티”파일에 내 비즈니스 로직을했고 난 그냥 각 내에서 방법을 수출하고 호출 shouldfocus()하는 방법.

건배!

---