React：多模态和动态传递道具

Question

我有一个项目列表 (ProjectActivityList)，每个项目都有“编辑”按钮。单击它会打开模式以编辑该项目。模态框接受 ID。

var ProjectActivities = React.createClass({

    onEditItem: function(id){
        // I want to pass the ID to modal and open it
    },

    render: function(){
        return (
           <div>
               <ProjectActivityList items={this.state.activities} onEdit={this.onEditItem}/>
               <Modal />
           </div>
        )    
    }    
});

如何打开传递给它 ID 的模式（在 onEditItem 中）？

Answer 1

您想将其作为道具传递并设置当前元素的状态。通过设置状态，将执行重新渲染（如有必要，在本例中就是如此），因此模态框将收到新的 id。

var ProjectActivities = React.createClass({

    onEditItem: function(id){
        // I want to pass the ID to modal and open it
        this.setState({editingId: id});
    },

    render: function(){
        return (
           <div>
               <ProjectActivityList items={this.state.activities} onEdit={this.onEditItem}/>
               <Modal id={this.state.editingId} />
           </div>
        )    
    }    
});

React：多模态和动态传递道具

React: multiple modal and passing props dynamically

javascript

reactjs

semantic-ui