Question

我有一个父组件，该组件可以动态创建子组件，并且效果很好。但是作为该子组件的一部分，我试图通过单击按钮来打开模态，但是该按钮不起作用。

在我看来，this.props.lgShow并未获得状态更改。我如何确定呢？

这是我的父组件：

import React, { Component, Fragment } from 'react';
import Button from 'react-bootstrap/Button';
import Policy from './Policy/Policy';
import PolicyButton from './PolicyButton/PolicyButton';




class Handbook extends Component {

    

    constructor(props){
        super(props);

        this.state = {
            clients: [],
            policies: [],
            usedPolicies: [],
            client: 'Choose Client',
            logo: '',
            color1: '#000',
            color2: '#fff',
            lgShow: 'false' // show modal toggle
        };

        this.modalOpen = this.modalOpen.bind(this);
        this.modalClose = this.modalClose.bind(this);
        this.modalSave = this.modalSave.bind(this);

        
    }

    componentDidMount() {
        fetch('/api/themes/all')
            .then(res => res.json())
            .then((result) => {
                this.setState({ clients: result });
                console.log(result);
            })
            .then(
                fetch(`/api/policy/all`)
                    .then(res => res.json())
                    .then((result) => {
                        this.setState({ policies: result });
                        console.log(result);
                    })
            );
    }

    

    handleDeletePolicy = policyId => {
        console.log(`Button clicked: ` + policyId);
        for (var i = 0; i < this.state.usedPolicies.length; i++) {
            if (this.state.usedPolicies[i].id === policyId) {
                const policies = this.state.policies;
                const usedPolicies = this.state.usedPolicies;
                policies.push(usedPolicies[i]);
                this.setState({ policies: policies });
                usedPolicies.splice(i, 1);
                this.setState({ usedPolicies: usedPolicies });
                console.log(this.state.policies);
                console.log(this.state.usedPolicies);

            }
        }
    }

    modalOpen = policyId => {
        console.log("Open Modal" + policyId);
        this.setState({lgShow: true});
    } 

    modalClose = policyId => {
        console.log("Close Modal" + policyId);
        this.setState({ lgShow: false });
    }

    modalSave = policyId => {
        console.log("Save Modal" + policyId);
        this.setState({ lgShow: false });
    }

    render(){
        return(
            <Fragment>
 
                <div className='policies'>
                    {this.state.usedPolicies.map(policy => (
                        <Policy key={policy.id} id={policy.id} policy={policy.policy} contents={policy.contents} color1={this.state.color1} color2={this.state.color2} onDeletePolicy={this.handleDeletePolicy} onOpen={this.modalOpen} onClose={this.modalClose} onSave={this.modalSave} />
                    ))}
                </div>
            </Fragment>
        );
    }
}

export default Handbook;

这是我的孩子部分。.我相信问题一定在这里。

import React, { Component } from 'react';
import styled from 'styled-components';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import TinyEditor from '../../TinyEditor/TinyEditor';


const Div = styled.div `
    background-color: white;
    color: black;
    margin-top: 2em;

    .edit{
        text-align: right;

        svg{
            font-size: 1em;
            margin: 0.25em;
        }
    }

    .policy{
        
        border: 1px solid black;
        padding: 2em;
    }

    h1{
        margin-bottom: 1em;
        text-align: left;
        padding: .25em;
    }
    
`


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

        this.state = {
            id: this.props.id,
            policy: this.props.policy,
            contents: this.props.contents,
            color1: this.props.color1,
            color2: this.props.color2,
            lgShow: this.props.lgShow
        }
    }


    render(){
        return(
            <Div className="container">
                <div className="edit">
                    <Button variant="light" onClick={() => this.props.onOpen(this.props.id)}><i className="far fa-edit"></i></Button>
                    <Button variant="light" onClick={() => this.props.onDeletePolicy(this.props.id)}><i className="far fa-trash-alt"></i></Button>
                        
                </div>
                <div className="policy">
                    <h1 style={{ background: this.props.color1, color: this.props.color2 }}>{this.props.policy}</h1>
                    <div dangerouslySetInnerHTML={{ __html: this.props.contents }}></div>
                </div>
                <Modal
                    size="lg"
                    show={this.props.lgShow}
                    onHide={this.props.onClose}
                    aria-labelledby="modal-title-lg"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id="modal-title-lg">
                            Large Modal
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <TinyEditor />
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.props.onClose}>
                            Close
                        </Button>
                        <Button variant="primary" onClick={this.props.onSave}>
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>
            </Div>
        )
    }

}

export default Policy;

Answer 1

在“政策”标签中没有看到“ lgShow”属性。

<Policy
    key={policy.id}
    id={policy.id}
    policy={policy.policy}
    contents={policy.contents}
    color1={this.state.color1}
    color2={this.state.color2}
    onDeletePolicy={this.handleDeletePolicy}
    onOpen={this.modalOpen}
    onClose={this.modalClose}
    onSave={this.modalSave}
/>

您在子元素“策略”中写道：

this.state = {
    id: this.props.id,
    policy: this.props.policy,
    contents: this.props.contents,
    color1: this.props.color1,
    color2: this.props.color2,
    lgShow: this.props.lgShow // This one is not in parent element
}

为什么this.prop无法更新？

1 个答案: