react.js - react不触发子组件更新

问题描述

问 题

没有明白怎么才触发它的更新，昨天写一个应用，明明state已经更新了，它也不从服务器重新获取数据，react不是自动触发更新的吗？

下面这个应用是我希望通<App/>的状态，更新Modal的显示与隐藏，初学者，代码比较烂

var Panel = ReactBootstrap.Panel, Accordion = ReactBootstrap.Accordion;
var Button = ReactBootstrap.Button, Input = ReactBootstrap.Input;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Modal = ReactBootstrap.Modal;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var ListGroup = ReactBootstrap.ListGroup,ListGroupItem = ReactBootstrap.ListGroupItem;
var PanelGroup = ReactBootstrap.PanelGroup;
var FormGroup = ReactBootstrap.FormGroup, FormControl = ReactBootstrap.FormControl;
var ControlLabel = ReactBootstrap.ControlLabel;


var storage = window.localStorage;//html5本地

var MainGroup = React.createClass({
    render: function(){

        return (
            <PanelGroup defaultActiveKey="" accordion>
                <Panel header="Panel 1" eventKey="1">
                    <h4>食材列表</h4>
                    <ListGroup>
                        <ListGroupItem>Item 1</ListGroupItem>
                        <ListGroupItem>Item 2</ListGroupItem>
                        <ListGroupItem>...</ListGroupItem>
                    </ListGroup>
                    <ButtonToolbar>
                        <Button bsStyle="info">编辑</Button>
                        <Button bsStyle="danger">删除</Button>
                    </ButtonToolbar>
                </Panel>
                <Panel header="Panel 2" eventKey="2">Panel 2 content</Panel>
            </PanelGroup>
        )
    }
});
var ModalPanel = React.createClass({
    getInitialState(){
        return {
            show: true
        }
    },
    showModal() {
        this.props.modal.show = true;
        console.log(this.props.modal.show);
    },
    hideModal() {
        this.props.modal.show = false;
    },
    save: function(){
        this.props.save(this.state.item);
    },
    render() {
        return (
            <Modal
                show={this.props.modal.show}
                onHide={this.hideModal}
                dialogClassName="custom-modal"
                >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-lg">{this.props.modal.head}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <FormGroup>
                        <ControlLabel>菜名</ControlLabel>
                        <FormControl type="text" placeholder="如：辣子鸡丁" />
                    </FormGroup>
                    <FormGroup>
                        <ControlLabel>原材料</ControlLabel>
                        <FormControl componentClass="textarea" placeholder="请以逗号隔开, 如：鸡肉,色拉油,辣椒" />
                    </FormGroup>
                </Modal.Body>

                <Modal.Footer>
                    <Button onClick={this.hideModal}>关闭</Button>
                    <Button onClick={this.save} bsStyle="primary">保存</Button>
                </Modal.Footer>
            </Modal>
        )
    }
});
var App = React.createClass({
    getInitialState: function(){
        return {
            Modal: {
                show: true,
                head: '添加食谱',
                item: {
                    title: '',
                    ingredients: ''
                }
            },
            cookbooks: [
                {
                    'title': '拍黄瓜',
                    'ingredients': '黄瓜,酱油,大蒜'
                },
                {
                    'title': '三文鱼',
                    'ingredients': '三文鱼,酱油,芥末'
                }
            ]
        }
    },
    showModal(){
        this.state.Modal.show = true;
        console.log(this.state.Modal.show);
    },
    render: function () {
        return (
            <div>
                <MainGroup cookbooks={this.state.cookbooks}/>
                <Button bsStyle="success" onClick={this.showModal}>添加菜单</Button>
                <ModalPanel modal={this.state.Modal}/>
            </div>
        )
    }
});

ReactDOM.render(<App/>, document.getElementById('app'));

解决方案

app里，showModal改下：

showModal(){
    this.setState({
        Modal: {
            show: true
        }
    });
},

这篇关于react.js - react不触发子组件更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！