使用onclick反应调用组件

时间：2018-05-12 07:30:45

标签： javascript jquery reactjs

大家都是伟大的程序员

感谢您阅读我的问题

。我在react库中的问题是我想通过一次单击调用另一个组件。

如果你看到代码我已经用// *******

提供了必要的解释 
<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')
);

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

    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')
)

我尝试过：

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" />
        });
    }

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')
         );
     });
 }

2 个答案:

答案 0 :(得分：1)

我认为您想要在编辑该类别时从表格中点击任何特定类别时呈现新的 <?php session_start(); include_once($_SERVER['DOCUMENT_ROOT'] . '/v5/functions/connect_li.php'); //if (!isset($_session['cart'])) $_SESSION["cart"]= 9; if (isset($_POST['myresort']) && !empty($_POST['myresort'])) { $resorts = $_POST['myresort']; $_SESSION['cart'][] = $resorts; } echo '<pre>'; print_r($_SESSION["cart"]); if (isset($_POST['myresort'])) { $key = array_search($_POST['myresort'], $_SESSION['cart']); if ($key !== false) { unset($_SESSION['cart'][$key]); $_SESSION["cart"] = array_values($_SESSION["cart"]); } } echo '</pre>'; if (!empty($_SESSION["cart"])) { echo '<a href="/skirerport/">my resorts: '; $_SESSION["cart"] = array_unique($_SESSION["cart"]); $_SESSION["cart"] = array_filter($_SESSION["cart"], 'strlen'); $arr_as_string = implode(',', $_SESSION["cart"]); $sql = "SELECT resort FROM sv_resorts WHERE res_id IN ($arr_as_string) ORDER BY resort LIMIT 10"; //echo $sql; $res = mysqli_query($conn, $sql); while ($ro = mysqli_fetch_array($res)) { echo $ro['resort'] . " "; } print_r($_SESSION["cart"]); echo "</a>"; } ?> 组件。我对吗？如果这是您的问题，那么我将为您提供解决方案。

editPage

安装这两个库。

所以这是你的列表组件。     从'react-router-dom'中导入{Link}; 

npm i react-router -s
npm i react-router-dom -s

这是你的编辑组件：

export class CategoryList extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        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>
                        <Link
                           className="btn btn-primary btn-sm"
                           to={`/edit/${category.id}`}
                         > 
                           Edit Category
                        </Link>
                </td>
            </tr>
        )
    })
}

创建新组件 class CategoryEdit extends React. Component { constructor(props) { super(props); this.state = { id, name, title, description, subTitle, imagePath, tags }; } componentDidMount() { const id = this.props.match.params.id; /*Call server to get details of that catagory using this id. Get response and set the response in your state like:- this.setState({title: response.title, description: response.description}) etc. */ } updateCatagory = () => { //this is your method to update category with new values in server. const {id, name, title, etc..... all params} = this.state; $.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) { this.history.push('/'); } }); } render() { return ( // CREATE UI and work //Add a button here. <button onClick={this.updateCatagory}>Update Catagory</button> ) } 

index.jsx

答案 1 :(得分：0)

您需要指定要在render方法中呈现的组件，为了在Click上呈现它，您可以将StateState设置为活动状态并有条件地呈现它

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,
            isActive : true
        });
    }

    render() {
       const { isActive, ...rest } = this.state;
       return (
          <div>
             <div>{ReturnView}</div>
             {isActive && <CategoryEdit {...rest}/>}
         </div>
       );
    }
相关问题
最新问题