React：如何通过onClick事件调用另一个组件类？

嘿，我来帮你搞定这个问题～首先得纠正一个小误区：React里不是像调用普通函数那样去“调用”另一个组件类的，而是通过状态控制渲染来让目标组件显示出来。下面我一步步给你改代码，让你能点击编辑按钮后展示CategoryEdit组件。

步骤1：修改CategoryList组件，添加控制显示的状态 #

首先在CategoryList的state里加一个showEditModal，用来控制是否显示编辑组件：

class CategoryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 0,
      name: "",
      title: "",
      description: "",
      subTitle: "",
      imagePath: "",
      tags: "",
      data: [],
      pageInfo: [],
      showEditModal: false // 新增控制显示的状态
    };
    // 绑定回调函数，避免this指向异常
    this.closeEditModal = this.closeEditModal.bind(this);
  }

  // ... 原有componentDidMount、renderCategories、deleteRow方法保持不变 ...

  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,
      showEditModal: true // 打开编辑组件
    });
  }

  // 新增关闭编辑组件的方法
  closeEditModal() {
    this.setState({ showEditModal: false });
  }

  render() {
    var ReturnView = (
      <div>
        <h1 className="text-center">Categories</h1>
        <hr />
        <table className="table table-bordered table-striped table-hovered table-sortable">
          {/* ... 表格原有代码保持不变 ... */}
        </table>
        {/* 根据showEditModal状态渲染CategoryEdit组件 */}
        {this.state.showEditModal && (
          <CategoryEdit
            category={this.state}
            onClose={this.closeEditModal}
          />
        )}
      </div>
    );
    return ReturnView;
  }
}

步骤2：修改CategoryEdit组件，接收父组件props并完善逻辑 #

原来的CategoryEdit直接用空state初始化不太合理，应该接收父组件传过来的分类数据，同时添加关闭和保存的交互逻辑：

class CategoryEdit extends React.Component {
  constructor(props) {
    super(props);
    // 用父组件传递的props初始化当前组件状态
    this.state = {
      id: props.category.id,
      name: props.category.name,
      title: props.category.title,
      description: props.category.description,
      subTitle: props.category.subTitle,
      imagePath: props.category.imagePath,
      tags: props.category.tags
    };
    this.editRow = this.editRow.bind(this);
  }

  // 如果不需要重新从接口拉取最新数据，可以删除componentDidMount；如果需要保留，记得改用props里的id请求
  // componentDidMount() {
  //   $.getJSON('http://localhost:49384/api/CategoryDetail', {id: this.props.category.id})
  //     .then(result => {
  //       const instance = result.oneInstance;
  //       this.setState({
  //         id: instance.id,
  //         name: instance.name,
  //         // ... 其他字段同步更新
  //       });
  //     });
  // }

  render() {
    return (
      {/* 用模态框包裹编辑表单，符合你原来的data-toggle="modal"需求 */}
      <div className="modal fade show" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Edit Category</h5>
              <button type="button" className="close" onClick={this.props.onClose}>
                <span>&times;</span>
              </button>
            </div>
            <div className="modal-body">
              {/* 示例表单字段，你可以根据需求调整 */}
              <div className="form-group">
                <label>Name</label>
                <input 
                  type="text" 
                  className="form-control" 
                  id="edit-name" 
                  value={this.state.name}
                  onChange={(e) => this.setState({ name: e.target.value })}
                />
              </div>
              <div className="form-group">
                <label>Title</label>
                <input 
                  type="text" 
                  className="form-control" 
                  id="edit-title" 
                  value={this.state.title}
                  onChange={(e) => this.setState({ title: e.target.value })}
                />
              </div>
              {/* 其他字段（描述、副标题等）按同样方式添加 */}
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" onClick={this.props.onClose}>
                Close
              </button>
              <button type="button" className="btn btn-primary" onClick={this.editRow}>
                Save Changes
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  editRow() {
    const { id, name, title, description, subTitle, imagePath, tags } = this.state;
    $.ajax({
      url: "http://localhost:49384/api/CategoryEdit", // 替换为你的实际编辑接口
      method: "POST",
      data: { id, name, title, description, subTitle, imagePath, tags },
      dataType: "json",
      success: (result) => {
        if (result.isSuccess) {
          alert("修改成功！");
          this.props.onClose(); // 关闭模态框
          // 可以在这里添加回调通知父组件刷新分类列表
          // this.props.onRefreshList();
        } else {
          alert(result.message);
        }
      },
      error: () => {
        alert("请求出错，请稍后重试");
      }
    });
  }
}

核心逻辑说明 #

• 组件显示控制：通过showEditModal布尔状态来决定是否渲染CategoryEdit，这是React中控制组件显隐的标准方式，符合React的状态驱动UI理念。
• 父子组件数据传递：父组件把选中的分类数据通过props传给子组件，避免子组件重复请求接口，同时保证数据来源统一。
• 双向通信：子组件通过onClose回调通知父组件关闭模态框，实现父子组件间的状态同步，遵循React单向数据流的原则。

内容的提问来源于stack exchange，提问作者A.J