Question

这是代码和错误请帮帮我

为什么我称之为.refs.xx函数是没有用的

我怎样才能获得CreateRoom的dom

class Header extends Component {
    croomHandler(){
        /*call error is here */
        this.refs.croomp.open();
    }
    render() {
        return (
            <Navbar brand="SinceTimes" inverse toggleNavKey={0}>
                <CreateRoom ref="croomp"/>
                <Nav right eventKey={0}>
                    <NavItem eventKey={1} onSelect={()=>this.croomHandler()}>Create Room</NavItem>
                </Nav>
            </Navbar>
        );
    }
}


/*child code */
class CreateRoom extends Component {
    constructor(props) {
        super(props);
        this.state = props;
    }
    static propTypes = {
        vis: React.PropTypes.bool
    };
    static defaultProps = {
        vis:false
    };
    /*call function is here */
    close(){
        this.setState({vis:false});
    }
    open(){
        this.setState({vis:true});
    }
    render() {
        let popover = <Popover title="popover">very popover. such engagement</Popover>;
        let tooltip = <Tooltip>wow.</Tooltip>;
        return (
            <Modal show={this.state.vis} onHide={()=>this.close()}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Text in a modal</h4>
               </Modal.Body>
                <Modal.Footer>
                    <Button onClick={()=>this.close()}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

错误是

未捕获的TypeError：this.refs.croomp.open不是函数

我怎样才能打开乐趣

Answer 1

你不应该在子组件上调用方法。尝试将道具传递给它（isOpen）并在需要时进行更改。例如：

＆＃13;

class Header extends Component {
    getInitialState(){
      return {croompIsOpen: false}  
    }
    croomHandler(){
        this.setState({croompIsOpen: true})
    }
    render() {
        return (
            <Navbar brand="SinceTimes" inverse toggleNavKey={0}>
                <CreateRoom ref="croomp" isOpen={this.state.croompIsOpen}/>
                <Nav right eventKey={0}>
                    <NavItem eventKey={1} onSelect={()=>this.croomHandler()}>Create Room</NavItem>
                </Nav>
            </Navbar>
        );
    }
}


/*child code */
class CreateRoom extends Component {
    constructor(props) {
        super(props);
        this.state = props;
    }
    static propTypes = {
        vis: React.PropTypes.bool
    };
    static defaultProps = {
        vis:false
    };
    /*call function is here */
    close(){
        this.setState({vis:false});
    }
    open(){
        this.setState({vis:true});
    }
    render() {
        let popover = <Popover title="popover">very popover. such engagement</Popover>;
        let tooltip = <Tooltip>wow.</Tooltip>;
        return (
            <Modal show={this.props.isOpen} onHide={()=>this.close()}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Text in a modal</h4>
               </Modal.Body>
                <Modal.Footer>
                    <Button onClick={()=>this.close()}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

＆＃13;

为什么我不能通过this.refs.xx调用函数

1 个答案: