Question

我正在尝试为表中的每个子元素（）行创建一个，以调用控制器中的操作。不确定如何完成此操作，我知道它是仅在Razor Views中使用ActionLink完成的，但是我正在尝试在ReactJS脚本本身中执行此操作。以前我创建了另一个问题，但以为我会用我认为可能更相关的代码来创建一个问题。我可以删除其他问题。目标是允许单击React渲染为集合中许多可枚举项目之一的表行，并将其重定向到另一个渲染该项目子项的控制器。单击代表故障单的表行->重定向到页面，该页面提供与故障单相关的日志以及故障单本身的层次结构上的其他详细信息。

我尝试查找关于ReactJS和ReactJS.Net MVC的一些教程。尽管这些教程非常适合于解释CRUD操作，但它们并未涵盖如何创建一个简单的链接，该链接将表行包装在React呈现的给定HTML元素表中。我发现我可能需要的是每篇文章的onClick属性，尽管我也愿意接受其他建议。我还看到过一些帖子，这些帖子在创建指向React元素的链接时使用标记，但是似乎需要导入，而没有Webpack不可能导入？有没有办法在没有Webpack的情况下实现这一目标？

Queue.jsx（在HTML表中显示票证的页面）：

class Queue extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: this.props.initialData };
        this.handleTicketLoad = this.handleTicketLoad.bind(this);
    }
    loadTicketsFromServer() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = () => {
            const data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        };
        xhr.send();
    }
    handleTicketLoad(ticket) {

        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.getUrl + ticket.id, true);
        xhr.send();
    }
    componentDidMount() {
        window.setInterval(() => this.loadTicketsFromServer(), this.props.pollInterval);
    }
    render() {
        return (
            <div className="queue">
                <h1>Affirm Queue</h1>



                <TicketList data={this.state.data} />

            </div>
        );
    }
}

class TicketList extends React.Component {
    render() {
        const ticketNodes = this.props.data.map(ticket => (
            <Ticket key={ticket.id} ticketLoad={this.handleTicketLoad}>

                    <td>{ticket.summary}</td> < td > { ticket.description }</td><td>{ticket.currentApptTime}</td>

            </Ticket>
        ));
        const ticketRaw = this.props.data.map(ticket => (
            <tr>
                    <td>{ticket.summary}</td><td>{ticket.id}</td><td>{ticket.description}</td><td>{ticket.currentApptTime}</td>
                </tr>
        ));
        return (
            <div className="ticketList">

                <table id="affirmTable" className="table table-bordered table-hover table-striped">
                    <tbody>
                        {ticketNodes}
                        </tbody>
                </table>
            </div>
        );
    }
}

function createRemarkable() {
    var remarkable = (("undefined" != typeof global) && (global.Remarkable)) ? global.Remarkable : window.Remarkable;
    return new remarkable();
}

class Ticket extends React.Component {
    rawMarkup() {
        var md = createRemarkable();
        var rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
    }
    render() {
        return (

            <tr className="ticket" onClick={this.ticketLoad}>


                        {React.Children.map(this.props.children, (child, i) => {
                            // Ignore the first child
                            return child
                        })}

                </tr>


        );
    }
}

在Razor视图中呈现“ Queue” React div的代码：

<div class="jumbotron">
        @Html.React("Queue", new
   {
       initialData = Model,
       getUrl = Url.Action("Ticket"),
       pollInterval = 2000,
   })
        <div id="content"></div>
    </div>

TicketController.cs（控制器，我希望将其重定向到该操作）：

public class TicketController : Controller
{
    private static readonly IList<ApptConfirmItem> logs;

    private static readonly IEnumerable<ApptConfirmItem> combined;

    private static readonly IEnumerable<ApptTaskTicket> ticketList;

    static TicketController()
    {
        logs = new List<ApptConfirmItem>();

        combined = logs;

        ticketList = (List<ApptTaskTicket>)System.Web.HttpContext.Current.Application["taskTickets"];

        //logs.Concat(addAppts);
    }
    // GET: Queue
    public ActionResult Ticket(Guid ticketId)
    {

        return View(ticketList.Single(a => a.id == ticketId));
    }

在上面的给定示例中，我希望Ticket组件内表行的“ onLoad”属性链接到父组件，以便调用GET请求并有效地呈现Ticket维护的页面控制器。相反，React似乎忽略了该属性，而且我完全看不到页面上呈现的onClick属性。谁能让我知道我在这里可能会想念什么？

在表行中创建到控制器动作的链接？

0 个答案: