Question

我正在尝试使用React和Material-UI创建一个Dialog组件。

现在，我有了Material-UI对话框的传统行为，在类中有一个可以打开对话框的按钮。但是我想要这个组件的行为与Material-UI对话框的行为相同。

所以我想改变他的状态并重新渲染调用它的组件：

var open = false;
<AuthDialog open={open} />

使用外部按钮将open变量更改为true。

这是我的代码：

class AuthDialog extends React.Component {
    constructor(props, context){
        super(props, context);

        this.state = {
           open: false,
        };
    };

    handleRequestOpen = () => {
        this.setState({
            open: true,
        });
    };

    handleRequestClose = () => {
        this.setState({
            open: false,
        });
    };

    render() {
        return (
        <div>
            <RaisedButton children="login" onTouchTap={ this.handleRequestOpen } />
            <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
                // Content
            </Dialog>
        </div>
        );
    }
}

我是JS的初学者，所以如果我的代码不对，我也会感激一些评论。

编辑：修改后这是我的代码：

class AuthDialog extends React.Component {
    constructor(props, context){
        super(props, context);

        this.state = {
            // State of authBody
        };  
    };

    render() {
        const { onRequestClose, open } = this.props;

        return (
            <Dialog open={open} onRequestClose={onRequestClose}>
                // Body of the dialog
            </Dialog>
        );
    }
}

在父母身上：

closeAuthDialog = () => {
    this.setState({
        openAuthDialog: false,
    });
}

openAuthDialog = () => {
    this.setState({
        openAuthDialog: true,
    });
}

<RaisedButton children="login" onTouchTap={ this.openAuthDialog } />
<AuthDialog open={this.state.openAuthDialog} onRequestClose={this.closeAuthDialog} handleLoginSuccess={ this.handleLoginSuccess } />

Answer 1

只需获取您从this.props传递的属性：

...
render() {
    const { open, onRaisedButtonClick } = this.props;
    return (
        <div>
            <RaisedButton children="login" onTouchTap={ onRaisedButtonClick } />
            <Dialog open={open} onRequestClose={this.handleRequestClose}>
                // Content
            </Dialog>
        </div>
    );
}
...

此外，当您拥有没有生命周期方法的无状态组件时，您可以使用功能组件;它更简单易读：

const AuthDialog = ({ open, onRaisedButtonClick }) => (
    <RaisedButton children="login" onTouchTap={ onRaisedButtonClick } />
    <Dialog open={open} onRequestClose={this.handleRequestClose}>
        // Content
    </Dialog>
)

Answer 2

为了实现这一目标，您需要使用props而不是本地状态。

class AuthDialog extends React.PureComponent {
    static propTypes = {
      open: React.PropTypes.bool.isRequired,
      onClose: React.PropTypes.func.isRequired,
      onOpen: React.PropTypes.func.isRequired,
    };

    render() {
      const { onClose, onOpen, open } = this.props;

      return (
        <div>
            <RaisedButton children="login" onTouchTap={onOpen} />
            <Dialog open={open} onRequestClose={onClose}>
                // Content
            </Dialog>
        </div>
      );
    }
}

然后从父类中发送两个函数和open prop。

<AuthDialog open={open} onOpen={this.toggleOpenToTrue} onClose={this.toggleOpenToFalse} />

Answer 3

我不确定你正在寻找什么。但根据我的理解，你想要像这样使用你的AuthDialog组件;

<AuthDialog open={open} />

点击<RaisedButton/>后，您需要显示<Dialog />并更改父级的＆＃39; 状态/ var同样。

在这种情况下，您会想要使用Flux或Redux来管理您的应用状态。因为React中的双向绑定是一种不好的做法，这将是你实现这一目标的最好方法。

如何制作可以从外部控制的反应组分？

3 个答案: