javascript - 我想在 REACT 中使用单击事件处理程序调用一个类

Question

我需要用onClick处理程序调用一个类。

类别列表类在这里，我写的第一个类工作正常，但我的问题是在编辑按钮处理程序代码中，我需要编写一个可以调用其他类*.js并运行它的代码。

        class CategoryList extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        id: 0, name: "", title: "", description: "", subTitle: "", imagePath: "", tags: "",
        data: [],
        pageInfo: []
    };
}
componentDidMount() {
    $.getJSON('http://localhost:49384/api/Category',
        {
            start: $('#page-number').val(),
            limit: $('#pag-size').val(),
            filter: $('#filter').val()
        })
        .then(res => {
            const posts = res.data;
            this.setState({ data: res.data, pageInfo: res.pageInfo });
        });
}
renderCategories() {
    return this.state.data.map(category => {
        return (
            <tr id={"one-row-" + category.id} key={category.id}>
                <td>{category.id}</td>
                <td>{category.name}</td>
                <td>{category.title}</td>
                <td>{category.description}</td>
                <td>{category.subTitle}</td>
                <td>{category.imagePath}</td>
                <td>{category.tags}</td>
                <td>
                    <a className="btn btn-primary btn-sm" data-toggle="modal" href="#edit-modal" title="Edit" onClick={(e) => this.editCategory(category)}>
                        <i className="fa fa-edit"></i>
                        Edit</a>
                    <a className="btn btn-info btn-sm" onClick={(e) => this.deleteRow(category.id, e)} title="Edit">
                        <i className="fa fa-trash"></i>
                        Delete
                        </a>
                </td>
            </tr>
        )
    })
}
render() {
    var ReturnView =
        <div>
            <h1 className="text-center">Categories</h1>
            <hr />
            <table className="table table-bordered table-striped table-hovered table-sortable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Title</th>
                        <th>Desc</th>
                        <th>Sub Title</th>
                        <th>Image</th>
                        <th>Tag</th>
                        <th>Utilities</th>
                    </tr>
                </thead>

                <tbody>
                    {this.renderCategories()}
                </tbody>
            </table>
        </div>
    return (
        ReturnView
    );
}
deleteRow(id, category) {
    var RowId = "#one-row-" + id;
    if (!confirm('Sure?'))
        return;
    $.ajax({
        url: "http://localhost:49384/api/CategoryDelete",
        method: "POST",
        data: { "id": id },
        dataType: "json",
        success: function (result) {
            if (result != null) {
                alert(result.message);
                if (result.isSuccess === true) {
                    $(RowId).fadeOut(750);
                }
            }
        }
    });
}
editCategory(category) {
    this.setState({
        id: category.id,
        name: category.name,
        title: category.title,
        description: category.description,
        subTitle: category.subTitle,
        imagePath: category.imagePath,
        tags: category.tags,
    }, function () {
        console.log(this.state.id);
        console.log(this.state.name);
        console.log(this.state.title);
        console.log(this.state.description);
        console.log(this.state.subTitle);
        console.log(this.state.imagePath);
        console.log(this.state.tags);
    });
 ************all my problems is here, i need write a code that can call other class name and that class is categoryEdit****************

}

}

我的第二个必须用编辑按钮调用的类在这里：

class CategoryEdit extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        id, name, title, description, subTitle, imagePath, tags
    };
}

componentDidMount() {
    $.getJSON('http://localhost:49384/api/CategoryDetail',{id=this.state.id})
        .then(result => {
            const instance = result.oneInstance;
            this.setState({
                id: instance.id, name: instance.name, title: instance.title, description: instance.description,
                subTitle: instance.subTitle, imagePath: instance.imagePath, tags: instance.tags
            });
        });
}

render() {
    return (
        <div>
         some ui code
        </div>
    )
}

editRow() {
    var id = this.state.id;
    var name = $("#edit-name").val();
    var title = $("#edit-title").val();
    var description = $("#edit-description").val();
    var subTitle = $("#edit-subTitle").val();
    var imagePath = $("#edit-imagePath").val();
    var tags = $("#edit-tags").val();
    $.ajax({
  handle
    });
}

}

标签： javascriptreactjsonclick