使用onclick反应调用组件 [英] React call a component with onclick

问题描述

所有伟大的程序员

感谢您阅读我的问题。我在反应语言中的问题是我想通过一次点击调用另一个组件。

如果你看到代码我已经提供了必要的解释// *******

Hi all great programmers
thanks for reading my question. My problem in react language is I want to call another component by one click.
if you see code I have provided the necessary explanations with //*******

<pre>class CategoryList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 0, name: "", title: "", description: "", subTitle: "", imagePath: "", tags: "",
            data: [],
            pageInfo: []
        };
    }

    componentDidMount() {
// read data is ok
    }

    renderCategories() {
// this function is ok
        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>
                        <a className="btn btn-primary btn-sm" data-toggle="modal" href="#edit-modal" title="EDIT" onClick={(e) => this.editCategory(category)}>
                            
                            EDIT</a>
                    </td>
                </tr>
            )
        })
    }

    render() {
// this function is ok
        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>
                        </tr>
                    </thead>

                    <tbody>
                        {this.renderCategories()}
                    </tbody>
                </table>
            </div>
        return (
            ReturnView
        );
    }


    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 () {
// ***************** All My Problems is here *****************
 Category Edit  Component must call here 
        });
    }
}

ReactDOM.render(
    <CategoryList subreddit="catgories" />,
    document.getElementById('root')
);

<第二个组件就在这里，我需要调用它并将参数发送到该类别编辑组件进行渲染：

the second component is here and i need call that and send parameters into that category edit component for rendering:

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

    componentDidMount() {
  //READ DATA FROM SERVER and work
    }

    render() {
        return (
           // CREATE UI and work
        )
    }

    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({
            url: "http://localhost:49384/api/CategoryEdit",
            method: "POST",
            data: {"Id":id, "Name": name, "Title": title, "Description": description, "SubTitle": subTitle, "ImagePath": imagePath, "Tags": tags },
            dataType: "json",
            success: function (result) {
                if (result != null) {
                    alert(result.message);
                    if (result.isSuccess === true) {
                        this.setState({
                            id: id, name: name, title: title, description: description,
                            subTitle: subTitle, imagePath: imagePath, tags: tags
                        });
                    }
                }
            }
        });
    }
}

ReactDOM.render(
    <CategoryEdit />,
    document.getElementById('pop-up-content')
)

我的尝试：



1：

What I have tried:

1 :

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 () {
            <CategoryEdit props="this.state" />
        });
    }

2：

2 :

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 () {
         ReactDOM.render(
             <CategoryEdit props="this.state" />,
             document.getElementById('pop-up-content')
         );
     });
 }

推荐答案

（ < span class =code-string>＃edit-name）。val（）;
var title =

("#edit-name").val(); var title =

（ ＃编辑标题）VAL（）;
var description =

("#edit-title").val(); var description =

（ ＃编辑描述）VAL（）;
var subTitle =

("#edit-description").val(); var subTitle =

这篇关于使用onclick反应调用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！