Question

class Posts extends Component {
    constructor(){
        super();
        this.state = {
            modalIsOpen:false
        };
        this.openModal = this.openModal.bind(this);
        this.afterOpenModal = this.afterOpenModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }
    openModal() {
        console.log("got here?")
        this.setState({modalIsOpen: true});
    }
    afterOpenModal() {
        // references are now sync'd and can be accessed.
        this.subtitle.style.color = '#f00';
    }
    closeModal() {
        this.setState({modalIsOpen: false});
    }
    render() {
        const keys = generateKey(new Date().getTime())
        var dictionary = this.props.posts
        const postItemsArr = Object.keys(dictionary).map(post=>dictionary[post])
        const number = 0
        const postItems = postItemsArr.map(
            post=>(
                <Jumbotron  key={generateKey(post.positiontitle) + generateKey(post.businessId)} >
                    <div className="position">{post.positiontitle}</div><br></br>
                    <BusinessName businessnameType={post.businessname} /><br></br>
                    <JobDescription jobDescription={post.description_sanitized} /><br></br>
                    <p>
                        <Modal isOpen={this.state.modalIsOpen}
                            onAfterOpen={this.afterOpenModal}
                            onRequestClose={this.closeModal}
                            style={customStyles}
                            contentLabel="Example"
                        >
                            <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
                            <button onClick={this.closeModal}>close</button>
                            <div>I am a modal</div>
                            <form>
                                <input />
                                <button>tab navigation</button>
                                <button>stays</button>
                                <button>inside</button>
                                <button>the modal</button>
                            </form>
                        </Modal>
                        <button onClick={this.openModal}>Open Modal</button>
                    </p>
                </Jumbotron> 
            )
        )
        return (
            <div>
                <h1> Jobs Listings </h1>
                {postItems }
            </div>
        );
    }
}

在我的Jumbotron中，我的模态似乎没有打开，为什么？

它看起来像是进入状态openModal（）

但实际上并没有在用户点击

时打开模态

<button onClick={this.openModal}>Open Modal</button>

也;我应该创建一个名为Modal的独立组件;什么是最佳做法？

总的来说，我正在尝试触发列表中相应列表项的模态对象。

Answer 1

我会创建一个名为modal的新演示组件，然后在需要时使用它，而不是执行您现在尝试执行的操作，即通过打开/关闭状态。 Modal可以是一个只接受道具的简单表示组件。通过这种方式，您可以创建可重用性。

heads/2018.02

模态未按预期打开

1 个答案: