Question

我正在使用React v0.14.6构建应用程序。所需的功能是单击GoalItem以显示ModalItem。目标项目有一个＆＃39; a＆＃39;带有属性onClick的标记，用于设置{this.state.showModal：true}。 ModalItem通过showModal属性传递给GoalItem＆＃39; s.state.showModal。

要更改ModalItem组件的状态，使this.state.showModal：this.props.showModal，我在componentWillReceiveProps中使用setState（）。

奇怪的行为是＆＃39; a＆＃39;需要单击GoalItem中的标记两次才能使模态出现。目标只需单击即可。

提前感谢您的帮助。以下是相关代码。

//goal-item.jsx

var React = require('react');
var ModalItem = require('./modal-item');

module.exports = React.createClass({
    getInitialState() {
        return {
            name: this.props.goal.name,
            nameChanged: false,
            showModal: false
        }
    },
    open() {
        this.setState({ showModal: true });
    },
    render() {
        return <a  className="list-group-item"
                   key={this.props.goal.id}
                   onClick={this.open}>
            <ModalItem goal={this.props.goal} showModal={this.state.showModal} />
        </a>
    }
});   

//modal-item.jsx

var React = require('react');
var Modal = require('react-bootstrap/lib/modal'); 
var Button = require('react-bootstrap/lib/button');
module.exports = React.createClass({
    getInitialState() {
        return {showModal: false };
    },
    componentWillReceiveProps() {
        this.setState({ showModal: this.props.showModal });
    },
    close() {
        this.setState({ showModal: false });
    },
    render() {
        return (
            <div>
                <Modal show={this.state.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>{this.props.goal.name}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>{this.props.goal.description}</p>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.close}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }
});

Answer 1

在componentWillReceiveProps中，您将获得新道具作为参数。所以它应该是：

componentWillReceiveProps(newProps) {
  this.setState({ showModal: newProps.showModal });
}

基本上，您可以使用this.props通过访问它们来比较参数中的新道具与旧道具，然后执行所需的状态更新。

请参阅文档：componentWillReceiveProps

React.js - componentWillReceiveProps仅更新每个this.props更新

1 个答案: