Question

我已经制作了一个烤面包机组件，只需单击几次，便可以渲染多个烤面包机。我面临的问题是，当单击句柄关闭组件或调用settimeout函数时，所有烤面包机都将终止。我通过另一个组件传递消息作为道具。

这是我的烤面包机组件

class Product < ApplicationRecord
  searchkick word_middle: [:number], case_sensitive: true
end

我尝试管理父组件中的状态，但是它似乎不起作用。我确实知道问题出在我的烤面包机组件的状态管理中，但不知道确切的问题和解决方案。任何对此的解决方案也可以随时指出我的任何错误。 TIA

Answer 1

句柄关闭是通过单击任何按钮来运行的，而不是通过其外观在其中一个按钮的实例上运行。

if (this.state.show) { // this determines whether to render you toasts... 
                       // and close turns all of them off.

您需要更改每个烤面包以具有其自己的show属性，并关闭以切换该烤面包并将其从烤面包阵列中删除以生成它。

注意：

您的道具和状态应该分开，不要将道具复制到状态中，因为这会引入错误并且更改不会反映出来。

constructor(props) {
    super(props);
    // avoid copying props into state
    // https://reactjs.org/docs/react-component.html#constructor
    this.state = {
        message: props.message,
        show: false,
        no: 0
    };
}

Answer 2

这种方法有另一种方式。

export default class MyToaster extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: props.message,
            show: true,
            no: 0
        };

    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({show: false})
        }, 4000)
    }

    handleclose = () => {
        this.setState({
            show: false,
            no: this.state.no - 1
        })
    }

    handleOpen = () => {

        this.setState({
            no: this.state.no + 1
        }, () => {
            setTimeout(() => {
                this.setState({
                    show: false,
                    no: this.state.no - 1
                })
            }, 3000)
        })

    }

    render() {
        return (
            <div className="col-md-2 offset-md-9">

                {this.state.show
                    ? (
                        <div className="container snackbar" style={this.props.style}>

                            <div className="card-header">
                                <h3 className="card-title">Toast</h3>
                            </div>

                            <div className="card-body">
                                {this.props.message}
                            </div>

                            <div className="card-footer"></div>

                        </div>
                    )
                    : null
}
            </div>

        )
    }
}

您可以从父组件中添加

this.state = {
toasterCollection: []
}

//make a function
handleToasterClick = () => {
        const toaster = <Toaster message={this.message} style={this.style}/>
        this.setState({
            // toasterCollection: [...this.state.toasterCollection, toaster]
            toasterCollection: [...this.state.toasterCollection, toaster]
        });
    }

//In your Render give a button
 <button className="btn btn-primary" onClick={this.handleToasterClick}>
                Toast
            </button>
//Also render this
 {this.state.toasterCollection}

这应该使您的代码正常工作。

单击反应中的关闭按钮时，所有烤面包机都关闭

2 个答案: