Самостоятельное состояние активной реакции (состояние пользовательского интерфейса)

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; 

The 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 вещь в каком-либо состоянии компонента, либо это, либо (наиболее вероятно) на компоненте верхнего уровня.

И как кажется легким, это действительно не , что легко реагировать. Отъезд this tutorial, здесь я объясняю, как сделать things like that с модальными всплывающими окнами.