트랙 Reactjs 페이지에서 이벤트와 구성 요소는 세계적으로

Question

나는 따라

1. 양식 이벤트를 제출 이벤트를 다음을 듣고 조치를 할 필요가 데이터를 제 3 자 서비스에 제공합니다. 그렇지 않은 경우 실패한 이벤트를 오류 발생 위치와 함께 Name submission failed으로 브로드 캐스트해야합니다.

2. 페이지 방문/경로 변경 - 자기 설명

3. 클릭 이벤트 -리스트 항목을 클릭하고 버튼 클릭에서 할 수 있습니다. 목록 항목이 항목 세부 정보를 전달해야하는 경우 버튼의 경우 이름 만 가능

4. 검색 - 모든 검색은 키워드를 보내는 이벤트를 발생시켜야합니다.

저는 React - 0.13과 Reflux store를 사용하고 있습니다.

전역 수준에서 이벤트를 처리하고 각 단추 클릭/제출 이벤트/검색 등에서 코드를 작성하지 않고 어떻게 처리 할 수 ​​있습니까?

최상의 접근 방법은 무엇입니까? 바디 핸들러가 충분하지 않아서 필자는이 수준의 커스터마이징이 필요하다고 생각합니다!

피씨 - 내가 방송 할 때 제 3 자의 함수 호출을 대신한다고 가정 해 봅시다.

Answer 1

는 순전히 방법으로 반응 :

이 확장 이벤트 처리 방법과 핸들 이벤트의 전역 기본 구성 요소 만들기 : 또는

const MyForm = ({ onSubmit, children, ...props }) => (
    <form {...props} onSubmit={evt => { 
    // do global handling 
    onSubmit(evt); 
    }}> 
    {children} 
    </form> 
); 

//use case 
const CustomForm =() => (
    <MyForm onSubmit={evt => /* custom handling */}> 
    {/* CustomForm inputs and such */} 
    </MyForm> 
) 

을, 당신은 HOC 방식을 각각의 핸들러를 포장 할 수이 필요합니다

const MyFormHOC = FormComponent => { 
    return class extends React.Component { 
    render() { 
     const { onSubmit, ...props } = this.props; 
     return (
     <FormComponent {...props} onSubmit={evt => { 
      // do global handling 
      onSubmit(evt); 
     }}/> 
    } 
    } 
}; 

//use case 
let CustomForm = ({ onSubmit, ...props }) => (
    <form onSubmit={evt => onSubmit(evt)}> 
    {/* CustomForm inputs and such */} 
    </form> 
); 
CustomForm = MyForm(CustomForm); 

HOC 접근 방식의 단점은 구성 요소가 이벤트 처리기를 따라 궁극적으로이를 호출 할 DOM 요소에 전달해야한다는 것입니다.

한 단계 더 나아가 모든 글로벌 이벤트를 처리하는 단일 기본 구성 요소 또는 HOC를 만든 다음 필요에 따라 다른 구성 요소에서이를 사용할 수 있습니다. 어떤 구성 요소가 어떤 소품을 지원하는지 알아야합니다 (예 : onSubmit은 form 이외의 다른 소품에 속하지 않습니다).