时间戳

首页 > 解决方案 > 使用 React 类创建多个按钮

javascript - 使用 React 类创建多个按钮

问题描述

我目前正在尝试使用 Reactjs 从一个类中返回多个按钮。目前我可以让所有按钮返回，但该onClick功能仅适用于要显示的最后一个按钮。如果有人可以帮助其不胜感激。这是重要的代码行。

          let GroupCollection2 = db.collection('groups');
            GroupCollection2.get()
                .then(snapshot => {
                    snapshot.forEach(doc => {
                        if(doc.get('ModuleCode') === document.getElementById("groupSearch").value)
                        {
                            document.getElementById("groupDisplayError").innerHTML = "";
                            if(found === false){
                                document.getElementById("groupDisplayTable").innerHTML = '<tr id="groupDisplayTableHeader"><th>Group Name</th><th>Module Code</th><th>Join Or View Group</th></tr>';
                            }
                            found = true;
                            document.getElementById("groupDisplayTable").innerHTML += "<tr><td>"+doc.id+"</td><td>"+doc.data().ModuleCode+"</td><td class='groupDisplayTableButton'></td></tr>";
                            ReactDOM.render(<Button command={doc.id} />, document.getElementsByClassName('groupDisplayTableButton')[count]);
                            count++;
                        }
                    });
                    if(found === false){
                        document.getElementById("groupDisplayError").innerHTML = "No Results.";
                    }
                })
                .catch(err => {
                    console.log('Error getting documents', err);
                });

和

class Button extends React.Component{

    joinGroup(command){
        alert(command);
    }

    render(){
        return(<button onClick={this.joinGroup.bind(this, this.props.command ) }>Join Group</button>);
    }


}

整个代码在这里：

import React from "react";
import ReactDOM from 'react-dom';
import { compose } from "redux";
import { connect } from "react-redux";
import { signout } from "../store/actions/auth";
import requireAuth from "./hoc/requireAuth";
import firebase from "../services/firebase.js";

import Calendar from "./Planner.js"
//<Calendar />
var db = firebase.firestore();

const Main = ({ signout }) => {
  return (
    <div id="homePage" className="container">


      <div className="row">
        <div class="col s6" id="createPage">
              <form id="createGroup">
            <i className="large material-icons prefix search-icon">group_add</i>
            <div className="row">
              <div className="col s12">
                <div className="row">
                  <div className="input-field col s12 vert-align">
                          <input type="text" id="cgroupName" name="groupName"/>
                    <label htmlFor="cgroupName">Group Name</label>
                  </div>
                </div>
                <div className="row">
                  <div className="input-field col s12 vert-align">
                    <input type="text" id="cgroupModuleCode" name="moduleCode"/>
                    <label htmlFor="cgroupModuleCode">Module Code</label>
                  </div>
                </div>
                <div className="row">
                  <input type="button" value="Create Group" onClick={ ()=> createGroup()}/>
                </div>
                <p id="groupCreateError"></p>
              </div>
            </div>
              </form>
          </div>

        <div className="col s6">
          {/*<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>*/}
          {/* Renders the search bar */}
          <i className="large material-icons prefix search-icon">group</i>
          <div className="row">
            <div className="col s12">
              <div className="row">
                <div className="input-field col s12 vert-align">
                  <i className="material-icons prefix search-icon">search</i>
                  <input type= "text" id ="groupSearch" name="searchGroup"/>
                  <label htmlFor="groupSearch">Search For A Group</label>
                  <a className="waves-effect waves-teal btn-flat search-btn" onClick={ ()=> searchGroups()}>Search</a>
                </div>
              </div>
            </div>
          </div>
          {/* Display any searched groups here */}
          <div class="row" id="groupDisplay">
            <p id="groupDisplayError"></p>
            <table id="groupDisplayTable">
            </table>
          </div>
        </div>
      </div>
      <button onClick={ () => profile()} hidden>Profile</button>
      <button className="btn-switch" onClick={() => signout()}>Log Out</button>
    </div>
  );
};

function mapStateToProps(state) {
  return {
    auth: state.firebaseReducer.auth
  };
}

function mapDispatchToProps(dispatch) {
  return {
    signout: () => dispatch(signout())
  };
}

function profile(){

}

function logOut(){
  document.getElementById("navbar").style.display = "none";
  signout();
}

function searchGroups(){
    if(document.getElementById("groupSearch").value === ""){
        document.getElementById("groupDisplayError").innerHTML = "Please enter a value and try again.";
    }
    else{
        var found = false;
        var count = 0;
        let GroupCollection = db.collection('groups').doc(document.getElementById("groupSearch").value);
        GroupCollection.get()
          .then(doc => {
            if (doc.exists) {
                found = true;
                document.getElementById("groupDisplayError").innerHTML = "";
                document.getElementById("groupDisplayTable").innerHTML = '<tr id="groupDisplayTableHeader"><th>Group Name</th><th>Module Code</th><th>Join Or View Group</th></tr>';
                document.getElementById("groupDisplayTable").innerHTML += "<tr><td>"+doc.id+"</td><td>"+doc.data().ModuleCode+"</td><td class='groupDisplayTableButton'></td></tr>";
                ReactDOM.render(<Button command={doc.id}/>, document.getElementsByClassName('groupDisplayTableButton')[count]);
                count++;
            } 
          })
          .catch(err => {
            document.getElementById("groupDisplayError").innerHTML = "Error getting document: "+err;
          });

          let GroupCollection2 = db.collection('groups');
            GroupCollection2.get()
                .then(snapshot => {
                    snapshot.forEach(doc => {
                        if(doc.get('ModuleCode') === document.getElementById("groupSearch").value)
                        {
                            document.getElementById("groupDisplayError").innerHTML = "";
                            if(found === false){
                                document.getElementById("groupDisplayTable").innerHTML = '<tr id="groupDisplayTableHeader"><th>Group Name</th><th>Module Code</th><th>Join Or View Group</th></tr>';
                            }
                            found = true;
                            document.getElementById("groupDisplayTable").innerHTML += "<tr><td>"+doc.id+"</td><td>"+doc.data().ModuleCode+"</td><td class='groupDisplayTableButton'></td></tr>";
                            ReactDOM.render(<Button command={doc.id} />, document.getElementsByClassName('groupDisplayTableButton')[count]);
                            count++;
                        }
                    });
                    if(found === false){
                        document.getElementById("groupDisplayError").innerHTML = "No Results.";
                    }
                })
                .catch(err => {
                    console.log('Error getting documents', err);
                });

    }
}

function createGroup(){
        let GroupCollection = db.collection('groups').doc(document.getElementById("cgroupName").value);
        GroupCollection.get()
          .then(doc => {
            if (!doc.exists) {
                document.getElementById("groupCreateError").innerHTML = "Group created sucessfully.";

                const GroupCollection2 = db.collection('groups');
                GroupCollection2.doc(document.getElementById("cgroupName").value).set({
                ModuleCode:document.getElementById("cgroupModuleCode").value,
                Timetable: "",
                User0: firebase.auth().currentUser.email,
                User1: "",
                User2: "",
                User3: "",
                User4: "",
                User5: "",
                User6: "",
                User7: "",
                User8: "",
                User9: "",
                })
            } else {
                document.getElementById("groupCreateError").innerHTML = "Group Name Already Exists.";
            }
          })
          .catch(err => {
            document.getElementById("groupCreateError").innerHTML = "Error getting document: "+err;
          });
}

class Button extends React.Component{

    joinGroup(command){
        alert(command);
    }

    render(){
        return(<button onClick={this.joinGroup.bind(this, this.props.command ) }>Join Group</button>);
    }


}

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  requireAuth
)(Main);

标签： javascripthtmlnode.jsreactjsfirebase

解决方案

您可能必须确保每个按钮都是唯一的键。在这种情况下，使用 doc.id 可能会起作用。因此，您需要添加一个关键道具，如下所示：

ReactDOM.render(<Button command={doc.id} key={doc.id} />,
   document.getElementsByClassName('groupDisplayTableButton')[count]);

如果您有可能拥有多个相同的 doc.id，您可以修改键以包含计数，以确保每个按钮都有一个唯一的键。即 key={doc.id + count}

推荐阅读