Question

我目前正在尝试通过调用某个API来构建一个与JSON数组一起工作的简单应用程序来学习反应。然后我想在列表项中显示数组的结果，当单击list-item之一然后它返回一个参数并调用api并在页面的其他部分显示数据。我已成功调用API并在列表项中显示正确的数据，但我正在努力弄清楚如何在页面的另一部分点击后显示数据。所以我目前在我的页面中有这个：

    <div class="col-lg-3 col-md-3">
        <div class="block-job-list" id="JobCardBlock"></div>
    </div>

    <div class="col-lg-9 col-md-9">
        <div class="block-job-list" id="JobDetailBlock"></div>
    </div>

    <script type="text/jsx">
    var JobCard = React.createClass({

        // get game info
        loadGameData: function() {
        document.getElementById("overlay").style.display = "block";
        var a_token = window.localStorage.getItem('access_token');
        $.ajax({
            type: 'GET',
            url: this.props.source,
            data: {
                page: 1,
            },
            dataType: "json",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", "Bearer " + a_token);
            },
            success: function(data) {
                $('#overlay').hide();
                this.setState({
                    data: data.order_list.data
                });
            }.bind(this),
            error: function(xhr, status, err) {
                $('#overlay').hide();
                console.error('#GET Error', status, err.toString());
            }.bind(this)
        });
    },

    getInitialState: function() {
        return {
            data: []
        }
    },

    componentDidMount: function() {
        this.loadGameData();
    },

    render: function() {
        return ( < div className = "CurrentGame" >
            < JobList data = {
                this.state.data
            }
            /> < /div>
        );
    }
});

var JobList = React.createClass({
    displayData: function(e) {
        var a_token = window.localStorage.getItem('access_token');
        $.ajax({
            type: 'POST',
            url: 'http://zipship-beta.herokuapp.com/job_detail',
            data: {
                order_id: e,
            },
            dataType: "json",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", "Bearer " + a_token);
            },
            success: function(data) {
                $('#overlay').hide();
                this.setState({
                    data: data.order_list
                });
                console.log(this.state.data);
            }.bind(this),
            error: function(xhr, status, err) {
                $('#overlay').hide();
                console.error('#GET Error', status, err.toString());
            }.bind(this)
        });
    },
    render: function() {

        if (!this.props.data) {
            return null;
        }
        return (
            <ul className="list-group">
            {

                this.props.data.map(function(jobDetail, i) {
                    return <li className="list-group-item" key=jobDetail.id}    onClick={()=>{this.displayData(jobDetail.id)}}>

                            </div>
                        </li>
                },this)
            }
            </ul>
        );
    }
});
</script>

Answer 1

如果您希望更改作业列表的操作，请在此处考虑作业卡的状态。

最简单的方法是创建一个父反应类，例如JobInfo，它只是充当这两个元素的容器。

file_get_contents("php://input")

然后JobInfo将维护这两个对象的状态。在React中，当你找到减少状态的方法时，它总是一个好兆头。然后JobInfo对象将具有一些功能，例如onListItemClick或updateJobCard。由于您正在使用ajax请求来更新状态，因此状态将会移至此父类。然后，您只需将此函数（作为道具）传递给JobList对象，并将其用于列表项上的onClick事件。现在，由于父节点的状态从onClick事件更改，状态更改将向下传播到JobList和JobCard信息。

您可以查看的另一个选项是拥有外部事件处理程序。这些方法就是你在Flux结构中发现的。这个想法使用JQuery或一些事件库来使您的JobList对象触发全局事件，并让您的JobCard对象订阅到此事件。

我建议反对的第二个选项。对于大多数简单的情况，它完全没有必要并且实现这种类型的系统。

TLDR;集中你的状态并将状态改变函数作为道具传递。

通过传递参数来响应js在函数调用上显示ajax数据

1 个答案: