Question

如何在react js中创建模态，当我单击btn继续时，它会显示下一个模态而不关闭模态，这是我要编写的模态代码

<!--{/if}-->
				</td>
				<td class="ord-act">
					<a href="?p=dashboard&a=print_orders&k=<!--{$order->order_id}-->" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Print Order">
						<span class="label label-primary"><i class="fa fa-print"></i></span>
					</a>
					<!--{if $order->validated eq 0 && $order->recommended eq 0 && $order->approved eq 0}-->
						<a href="#" class="order_action" data-id="<!--{$order->order_id}-->" id="validate">
							<span class="label label-default">Validate</span>
						</a>
                        
					<!--{elseif $order->validated eq 1 && $order->recommended eq 0 && $order->approved eq 0}-->
						<a href="#" class="order_action" data-id="<!--{$order->order_id}-->" id="recommend">
							<span class="label label-warning">Recommend</span>
						</a>
					<!--{elseif $order->validated eq 1 && $order->recommended eq 1 && $order->approved eq 0}-->
						<a href="#" class="order_action" data-id="<!--{$order->order_id}-->" id="approve">
							<span class="label label-info">Approve</span>
						</a>
					<!--{elseif $order->validated eq 1 && $order->recommended eq 1 && $order->approved eq 1}-->
						<a href="#" class="order_action" data-id="<!--{$order->order_id}-->" id="program">
							<span class="label label-success">Program</span>
						</a>
					<!--{/if}-->
					<!--{if $order->approved eq 0}-->
					<a href="#" class="order_action" data-id="<!--{$order->order_id}-->" id="disapprove">
						<span class="label label-danger">Disapprove</span>
					</a>
					<!--{/if}-->
				</td>
			</tr>
		<!--{/foreach}-->
	</tbody>
</table>
<!--{else}-->
	<div class="well well-sm text-center col-md-5 col-md-offset-3">
		<h4><i class="fa fa-times-circle-o"></i> No Pending Airtime</h4>
		<p>There are no airtime orders available for now.</p>
		<a href="?p=dashboard&a=airtime_orders" class="btn btn-default"><i class="fa fa-refresh"></i> Refresh</a>
	</div>
<!--{/if}-->

Answer 1

您可以设置另一个状态属性，即所显示的模式页面的编号。

this.state = {
    pageNumber: 0,
}

然后使用按钮操纵该状态：

前进按钮：

this.setState({pageNumber: this.state.pageNumber+1})

返回按钮上：

this.setState({pageNumber: this.state.pageNumber-1})

然后，在组件正文中，您可以根据编号显示不同的页面：

this.state.pageNumber === 0 ? <div> Page 0 (nextButton) </div> : '';
this.state.pageNumber === 1 ? <div> Page 1 (prevButton, nextButton) </div> : '';
this.state.pageNumber === 2 ? <div> Page 2 (prevButton) </div> : '';

希望您有主意！：）

如何在reactjs中创建分页模式

1 个答案: