반응 구성 요소 자체 상태 (UI 상태)

Question

React-toolbox 대화 상자를 사용 중입니다. 메시지 및 닫기 버튼이있는 대화 상자를 표시하는 alert()처럼 작동하는 간단한 확인 대화 상자로 포장하고 싶습니다.

그래서하지만 난 그냥 자기가 대화 상자를 닫습니다 닫기 버튼을 싶습니다, 내가 그것을 필요로 할 때 확인 대화 상자가 표시됩니다 있도록이

const ConfirmationDialog =({active, size, title, message}) => { 

    const onClickConfirm =()=> { 
    active = false; 
    } 

    return (
     <Dialog 
     active={active} 
     title={title} 
     type={size} 
     > 
     <p>{message}</p> 
      <button onClick={onClickConfirm}>Close</button> 
     </Dialog> 
); 
} 

export default ConfirmationDialog; 

active처럼 내 표상 구성 요소는 소품에서 제공합니다.

실제로 handleOnClose 함수를 전달해야합니까? 이 구성 요소를 사용하려고 할 때마다 해당 함수를 전달해야하는 것은 너무 과도한 것처럼 보입니다. 또는 정말 간단한 작업을 수행하기 위해 컨테이너 클래스를 만들어야합니까?

Answer 1

당신은 클래스로 ConfirmationDialog 구성 요소를 만들고 거기에 active 변수를 저장하는 로컬 상태를 사용할 수 있습니다 당신은 직접 코드에서 소품을 수정하고

import React, { Component, PropTypes } from 'react'; 

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

    // Setting `active` state property from props. 
    this.state = { 
     active: props.active, 
    }; 

    // As we are passing this function as event handler, we need bind context, 
    // to get access to `this` inside this function. 
    this.handleCloseClick = this.handleCloseClick.bind(this); 
    } 

    componentWillReceiveProps(nextProps) { 
    // When we will provide `active` variable via props, we will automatically set it to state. 
    if (nextProps.active !== this.props.active) { 
     this.setState({ 
     active: nextProps.active, 
     }); 
    } 
    } 

    handleCloseClick() { 
    // On clicking `close` button, setting `active` state variable to `false`, 
    // it forces component to rerender with new state. 
    this.setState({ 
     active: false, 
    }); 
    } 

    render() { 
    const { title, size, message } = this.props; 
    // Getting `active` variable from state, instead of props. 
    const { active } = this.state; 
    return (
     <Dialog 
     active={active} 
     title={title} 
     type={size} 
     > 
     <p>{message}</p> 
     <button onClick={this.handleCloseClick}>Close</button> 
     </Dialog> 
    ); 
    } 
}; 

Answer 2

. 이 코드가 작동하는지 궁금합니다. 왜냐하면 그렇게해서는 안됩니다.

구성 요소의 상태 어딘가에 active thingy를 저장해야합니다.이 상태 또는 상위 구성 요소 중 하나 일 가능성이 큽니다.

그리고 쉽게 볼 수 있듯이, 은 실제로는과 반응하기 쉽지 않습니다. this tutorial을 확인하십시오, 여기 모달 팝업으로 things like that하는 방법을 설명합니다.