bugfix> javascript > 投稿
こんにちはすべての偉大なプログラマー私の質問を読んでくれてありがとう。反応ライブラリの私の問題は、ワンクリックで別のコンポーネントを呼び出すことです。コードが表示される場合、必要な説明を// *******で提供しています
<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')
);

2番目のコンポーネントはここにあり、それを呼び出してレンダリングのためにそのカテゴリ編集コンポーネントにパラメータを送信する必要があります:

   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 件
  • 新しい editPage をレンダリングしたいと思います  コンポーネントを編集するには、テーブルから特定のカテゴリをクリックして、そのカテゴリを編集します。私は正しいですか?それがあなたの問題であれば、私はあなたに解決策を提供します。

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

    これらの2つのライブラリをインストールします。

    これがリストコンポーネントです。     'react-router-dom'から{Link}をインポートします。

    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 を作成します

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import {Route, BrowserRouter, Switch} from 'react-router-dom';
    import {CategoryList} from './your-path-to-component';
    import {CategoryEdit} from './your-path-to-component';
        ReactDOM.render(
                <HashRouter>
                    <Switch>
                        <Route exact={true} path="/" component={CategoryList}/>
                        <Route exact={true} path="/edit/:id" component={CategoryEdit}/>
                    </Switch>
                </HashRouter>,
            document.getElementById('app')
        );
    }
    
    

  • renderメソッド内でレンダリングするコンポーネントを指定する必要があります。Clickでレンダリングするには、アクティブな状態をsetStateにして、条件付きでレンダリングできます

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

あなたの答え