使用onclick反应调用组件

本文介绍了使用onclick反应调用组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 所有伟大的程序员 感谢您阅读我的问题。我在反应语言中的问题是我想通过一次点击调用另一个组件。 如果你看到代码我已经提供了必要的解释// *******Hi all great programmersthanks 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') ); }); }推荐答案 这篇关于使用onclick反应调用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！