使用 onClick 按钮创建卡片元素的克隆

Question

我的代码有问题并且找不到解决方案，基本上我试图在单击“加号”按钮时克隆卡片元素以“添加成员”。我正在使用react-redux。 我希望能够在每个成员中添加两个具有不同数据的其他成员（不再有），这就是为什么我做了三个，所以这就是我在商店里得到的：

team :[{
      Firstname: "",
      Age: "",
      Role: "",
      Statut: "",
      Money: "",
      Formation: 0,
      Experience: 0,
      Reseau: 0,
      Rating: 0,
    },
     {
      Firstname1: "",
      Age1: "",
      Role1: "",
      Statut1: "",
      Money1: "",
      Formation1: 0,
      Experience1: 0,
      Reseau1: 0,
      Rating1: 0,
     },
     {
      Firstname2: "",
      Age2: "",
      Role2: "",
      Statut2: "",
      Money2: "",
      Formation2: 0,
      Experience2: 0,
      Reseau2: 0,
      Rating2: 0,
     }
    ]

这就是我的组件中的内容（<link>/<button> 在代码的最后）：

class TeamEditor extends Component{
   render() {  
      return(
        // BACKGROUND CARD //
        <div className="mr-2">
        <Card className= "Editor-card"> 
          <Row>
            <Col md={4}>
              <CardHeader className="card-header-warning card-header-icon">
                  <div className="card-icon card-icon-team">
                    <img src={process.env.PUBLIC_URL + '../assets/images/001-trade.svg' } width="40px" className="icon" alt="icon"/> 
                  </div>
                  <h3 className="float-left card-category mt-2"><span className="text-team">Notre équipe</span></h3>
              </CardHeader>
            </Col> 
            <Col  md={8} >
              <NavLink to="/" className="d-flex justify-content-end mt-0">
                <Button className= "mt-3">Enregistrer et quitter</Button>
              </NavLink> 
            </Col>
          </Row> 
          {/* CARD NUMBER ONE */}
            <Card className="InsideCard">
              <CardBody>  
                <Form>
                  <Row className="d-flex justify-content-around">
                    <Col md={2}>
                      <FormGroup>
                        <Label for="examplePrenom">Mon Prénom</Label>
                        <Input type="Prenom" name="Prenom" id="examplePrenom" value={this.props.Firstname} onChange={this.props.setFirstname}/>
                      </FormGroup>
                    </Col>
                    <Col md={1}>
                      <FormGroup>
                        <Label for="examplePassword">Mon âge</Label>
                        <Input type="Age" name="Age" id="exampleAge" value={this.props.Age} onChange={this.props.setAge} />
                      </FormGroup>
                    </Col>
                    <Col md={2}>
                      <FormGroup>
                        <Label for="exampleFonction">Ma fonction</Label>
                        <Input type="Fonction" name="Fonction" id="exampleFonction" value={this.props.Role} onChange={this.props.setRole} />
                      </FormGroup>
                    </Col>  
                    <Col md={2}>
                      <FormGroup>
                        <Label className="labelForm" for="StatutSocial">Mon statut</Label>
                        <Input type="select" name="StatutSocial" id="StatutSocial" value={this.props.Statut} onChange={this.props.setStatut}>
                          <option>Actionnaire</option>
                          <option>Gérant.e ou co Gérant.e</option>
                          <option>Salarié.e</option>
                          <option>Soutien</option>
                        </Input>
                      </FormGroup>
                    </Col>
                    <Col md={2}>
                      <FormGroup>
                        <Label for="Finance">Mes attentes financière</Label>
                        <Input type="Finance" name="Attente Financiere" id="Finance" value={this.props.Money} onChange={this.props.setMoney}/>    
                      </FormGroup>
                   </Col>
                </Row>
            </Form>
           <Row className="d-flex justify-content-around mt-3" >
              <p className= "Passion">Passion</p>
              <p className= "Passion">Expérience</p>
              <p className= "Passion">Réseau</p>
              <p className= "Passion">Formation</p> 
           </Row>
           <Row className="d-flex justify-content-around">
            <ReactStars value={this.props.Passion} onChange={this.props.setPassion} count={4} size={20} color2={'#ffd700'} />
            <ReactStars value={this.props.Experience} onChange={this.props.setExperience} count={4} size={20} color2={'#ffd700'} />
            <ReactStars value={this.props.Reseau} onChange={this.props.setReseau} count={4}  size={20} color2={'#ffd700'} /> 
            <ReactStars value={this.props.Formation} onChange={this.props.setFormation} count={4} size={20} color2={'#ffd700'} />
           </Row> 
         </CardBody> 
        </Card> 
        {/* CARD NUMBER TWO */}
        <Card className="InsideCard">
              <CardBody>  
                <Form>
                  <Row className="d-flex justify-content-around">
                    <Col md={2}>
                      <FormGroup>
                        <Label for="examplePrenom">Mon Prénom</Label>
                        <Input type="Prenom" name="Prenom" id="examplePrenom" value={this.props.Firstname1} onChange={this.props.setFirstname1}/>
                      </FormGroup>
                    </Col>
                    <Col md={1}>
                      <FormGroup>
                        <Label for="examplePassword">Mon âge</Label>
                        <Input type="Age" name="Age" id="exampleAge" value={this.props.Age1} onChange={this.props.setAge1} />
                      </FormGroup>
                    </Col>
                    <Col md={2}>
                      <FormGroup>
                        <Label for="exampleFonction">Ma fonction</Label>
                        <Input type="Fonction" name="Fonction" id="exampleFonction" value={this.props.Role1} onChange={this.props.setRole1} />
                      </FormGroup>
                    </Col>  
                    <Col md={2}>
                      <FormGroup>
                        <Label className="labelForm" for="StatutSocial">Mon statut</Label>
                        <Input type="select" name="StatutSocial" id="StatutSocial" value={this.props.Statut1} onChange={this.props.setStatut1}>
                          <option>Actionnaire</option>
                          <option>Gérant.e ou co Gérant.e</option>
                          <option>Salarié.e</option>
                          <option>Soutien</option>
                        </Input>
                      </FormGroup>
                    </Col>
                    <Col md={2}>
                      <FormGroup>
                        <Label for="Finance">Mes attentes financière</Label>
                        <Input type="Finance" name="Attente Financiere" id="Finance" value={this.props.Money1} onChange={this.props.setMoney1}/>    
                      </FormGroup>
                   </Col>
                </Row>
            </Form>
           <Row className="d-flex justify-content-around mt-3" >
              <p className= "Passion">Passion</p>
              <p className= "Passion">Expérience</p>
              <p className= "Passion">Réseau</p>
              <p className= "Passion">Formation</p> 
           </Row>
           <Row className="d-flex justify-content-around">
            <ReactStars value={this.props.Passion1} onChange={this.props.setPassion1} count={4} size={20} color2={'#ffd700'} />
            <ReactStars value={this.props.Experience1} onChange={this.props.setExperience1} count={4} size={20} color2={'#ffd700'} />
            <ReactStars value={this.props.Reseau1} onChange={this.props.setReseau1} count={4}  size={20} color2={'#ffd700'} /> 
            <ReactStars value={this.props.Formation1} onChange={this.props.setFormation1} count={4} size={20} color2={'#ffd700'} />
           </Row> 
         </CardBody> 
        </Card> 
        {/* CARD NUMBER THREE */}
        <Card className="InsideCard">
              <CardBody>  
                <Form>
                  <Row className="d-flex justify-content-around">
                    <Col md={2}>
                      <FormGroup>
                        <Label for="examplePrenom">Mon Prénom</Label>
                        <Input type="Prenom" name="Prenom" id="examplePrenom" value={this.props.Firstname2} onChange={this.props.setFirstname2}/>
                      </FormGroup>
                    </Col>
                    <Col md={1}>
                      <FormGroup>
                        <Label for="examplePassword">Mon âge</Label>
                        <Input type="Age" name="Age" id="exampleAge" value={this.props.Age2} onChange={this.props.setAge2} />
                      </FormGroup>
                    </Col>
                    <Col md={2}>
                      <FormGroup>
                        <Label for="exampleFonction">Ma fonction</Label>
                        <Input type="Fonction" name="Fonction" id="exampleFonction" value={this.props.Role2} onChange={this.props.setRole2} />
                      </FormGroup>
                    </Col>  
                    <Col md={2}>
                      <FormGroup>
                        <Label className="labelForm" for="StatutSocial">Mon statut</Label>
                        <Input type="select" name="StatutSocial" id="StatutSocial" value={this.props.Statut2} onChange={this.props.setStatut2}>
                          <option>Actionnaire</option>
                          <option>Gérant.e ou co Gérant.e</option>
                          <option>Salarié.e</option>
                          <option>Soutien</option>
                        </Input>
                      </FormGroup>
                    </Col>
                    <Col md={2}>
                      <FormGroup>
                        <Label for="Finance">Mes attentes financière</Label>
                        <Input type="Finance" name="Attente Financiere" id="Finance" value={this.props.Money2} onChange={this.props.setMoney2}/>    
                      </FormGroup>
                   </Col>
                </Row>
            </Form>
           <Row className="d-flex justify-content-around mt-3" >
              <p className= "Passion">Passion</p>
              <p className= "Passion">Expérience</p>
              <p className= "Passion">Réseau</p>
              <p className= "Passion">Formation</p> 
           </Row>
           <Row className="d-flex justify-content-around">
            <ReactStars value={this.props.Passion2} onChange={this.props.setPassion2} count={4} size={20} color2={'#ffd700'} />
            <ReactStars value={this.props.Experience2} onChange={this.props.setExperience2} count={4} size={20} color2={'#ffd700'} />
            <ReactStars value={this.props.Reseau2} onChange={this.props.setReseau2} count={4}  size={20} color2={'#ffd700'} /> 
            <ReactStars value={this.props.Formation2} onChange={this.props.setFormation2} count={4} size={20} color2={'#ffd700'} />
           </Row> 
         </CardBody> 
        </Card> 
       </Card>
       <Row className="d-flex justify-content-around">
        <a href="ajout" className="round-button">+</a>
       </Row>
    </div>   
     );
    }   
   }

const mapActionToProps = {
  //CARD NUMBER ONE//
  setFirstname : setFirstname,
  setAge: setAge,
  setRole: setRole,
  setStatut: setStatut,
  setMoney: setMoney,
  setPassion: setPassion,
  setExperience: setExperience,
  setReseau: setReseau,
  setFormation: setFormation,
   //CARD NUMBER TWO//
  setFirstname1 : setFirstname1,
  setAge1: setAge1,
  setRole1: setRole1,
  setStatut1: setStatut1,
  setMoney1: setMoney1,
  setPassion1: setPassion1,
  setExperience1: setExperience1,
  setReseau1: setReseau1,
  setFormation1: setFormation1,
   //CARD NUMBER THREE//
  setFirstname2 : setFirstname2,
  setAge2: setAge2,
  setRole2: setRole2,
  setStatut2: setStatut2,
  setMoney2: setMoney2,
  setPassion2: setPassion2,
  setExperience2: setExperience2,
  setReseau2: setReseau2,
  setFormation2: setFormation2,
}
const mapStateToProps = state => ({
   //CARD NUMBER ONE//
  team: state.team,
  Firstname : state.team.Firstname,
  Age : state.team.Age,
  Role: state.team.Role,
  Statut: state.team.Statut,
  Money: state.team.Money,
  Passion: state.team.Passion,
  Experience: state.team.Experience,
  Reseau: state.team.Reseau,
  Formation: state.team.Formation,
   //CARD NUMBER TWO//
  Firstname1 : state.team.Firstname1,
  Age1 : state.team.Age1,
  Role1: state.team.Role1,
  Statut1: state.team.Statut1,
  Money1: state.team.Money1,
  Passion1: state.team.Passion1,
  Experience1: state.team.Experience1,
  Reseau1: state.team.Reseau1,
  Formation1: state.team.Formation1,
   //CARD NUMBER THREE//
  Firstname2 : state.team.Firstname2,
  Age2 : state.team.Age2,
  Role2: state.team.Role2,
  Statut2: state.team.Statut2,
  Money2: state.team.Money2,
  Passion2: state.team.Passion2,
  Experience2: state.team.Experience2,
  Reseau2: state.team.Reseau2,
  Formation2: state.team.Formation2
 }
);

export default connect(mapStateToProps, mapActionToProps)(TeamEditor);

我不知道在我的构造函数中放什么，我的按钮也不知道（链接）。

Answer 1

回答您的所有问题。除非您在创建类之前对父类或收到的道具进行一些计算，否则您不需要构造函数。仔细查看您的代码 - 您还没有看到从全局状态收到的 props 和本地 state 之间的区别，但为了进行最小的更改，我将只解释区别 - 本地组件状态是当不需要与其他组件共享时，因此将其存储在 state 中，而不是复制到 store，而不是发送到 props 是不对的。而是在 reducer 和 connect 方法中使用初始状态跳过第一个参数 connect(undefined, ...。

看看mapDispatchToProps 方法 - 这应该是函数，而不是对象，除非最新的 redux 允许它，它是函数，因为在将它传递给全局状态（存储）之前可能需要一些计算，与 mapStateToProps 的想法相同。

class TeamEditor extends Component {

    /* no need for state (state is not the same as props) and without constructor
you can write state = {here your local state}; no need for 'this' keyword
*/
    state = {
        Team: [],
        //...other initial parameters
    };
    //better use arrow function - no need to use .bind in constructor
    render = () => {
        return (<div className="mr-2">
                {this.props.team.map(t => (<Card className="Editor-card">
                            <Row>
                                <Col md={4}>
                                    <CardHeader className="card-header-warning card-header-icon">
                                        <div className="card-icon card-icon-team">
                                            <img src={process.env.PUBLIC_URL + '../assets/images/001-trade.svg'} width="40px" className="icon"
                                                 alt="icon"/>
                                        </div>
                                        <h3 className="float-left card-category mt-2"><span className="text-team">Notre équipe</span></h3>
                                    </CardHeader>
                                </Col>
                                <Col md={8}>
                                    <NavLink to="/" className="d-flex justify-content-end mt-0">
                                        <Button className="mt-3">Enregistrer et quitter</Button>
                                    </NavLink>
                                </Col>
                            </Row>
                            <Card>
                                <CardBody>
                                    <Form>
                                        <Row className="d-flex justify-content-around">
                                            <Col md={2}>
                                                <FormGroup>
                                                    <Label for="examplePrenom">Mon Prénom</Label>
                                                    <Input type="Prenom" name="Prenom" id="examplePrenom" value={t.Firstname}
                                                           onChange={this.props.setFirstname}/>
                                                </FormGroup>
                                            </Col>
                                            <Col md={1}>
                                                <FormGroup>
                                                    <Label for="examplePassword">Mon âge</Label>
                                                    <Input type="Age" name="Age" id="exampleAge" value={t.Age} onChange={this.props.setAge}/>
                                                </FormGroup>
                                            </Col>
                                            <Col md={2}>
                                                <FormGroup>
                                                    <Label for="exampleFonction">Ma fonction</Label>
                                                    <Input type="Fonction" name="Fonction" id="exampleFonction" value={t.Role}
                                                           onChange={this.props.setRole}/>
                                                </FormGroup>
                                            </Col>
                                            <Col md={2}>
                                                <FormGroup>
                                                    <Label className="labelForm" for="StatutSocial">Mon statut</Label>
                                                    <Input type="select" name="StatutSocial" id="StatutSocial" value={t.Statut}
                                                           onChange={t.setStatut}>
                                                        <option>Actionnaire</option>
                                                        <option>Gérant.e ou co Gérant.e</option>
                                                        <option>Salarié.e</option>
                                                        <option>Soutien</option>
                                                    </Input>
                                                </FormGroup>
                                            </Col>
                                            <Col md={2}>
                                                <FormGroup>
                                                    <Label for="Finance">Mes attentes financière</Label>
                                                    <Input type="Finance" name="Attente Financiere" id="Finance" value={t.Money}
                                                           onChange={t.setMoney}/>
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                    </Form>
                                    <Row className="d-flex justify-content-around mt-3">
                                        <p className="Passion">Passion</p>
                                        <p className="Passion">Expérience</p>
                                        <p className="Passion">Réseau</p>
                                        <p className="Passion">Formation</p>
                                    </Row>
                                    <Row className="d-flex justify-content-around">
                                        <ReactStars value={t.Passion} onChange={this.props.setPassion} count={4} size={20} color2={'#ffd700'}/>
                                        <ReactStars value={t.Experience} onChange={this.props.setExperience} count={4} size={20} color2={'#ffd700'}/>
                                        <ReactStars value={t.Reseau} onChange={this.props.setReseau} count={4} size={20} color2={'#ffd700'}/>
                                        <ReactStars value={t.Formation} onChange={this.props.setFormation} count={4} size={20} color2={'#ffd700'}/>
                                    </Row>
                                </CardBody>
                            </Card>
                        </Card>
                    )
                )}
                <Row className="d-flex justify-content-around">

                    <a href="ajout" className="round-button" onClick={
                        // no idea what method should be here but Team seems o be an object not method
                    }>+</a>
                </Row>
            </div>
        );


    };
}


const mapDispatchToProps = (dispatch) => ({
    setFirstname: (/* parameters for this action */) => dispatch(setFirstname(/* parameters for this action */)),
    setAge: (/* parameters for this action */) => dispatch(setAge(/* parameters for this action */)),
    setRole: (/* parameters for this action */) => dispatch(setRole(/* parameters for this action */)),
    setStatut: (/* parameters for this action */) => dispatch(setStatut(/* parameters for this action */)),
    setMoney: (/* parameters for this action */) => dispatch(setMoney(/* parameters for this action */)),
    setPassion: (/* parameters for this action */) => dispatch(setPassion(/* parameters for this action */)),
    setExperience: (/* parameters for this action */) => dispatch(setExperience(/* parameters for this action */)),
    setReseau: (/* parameters for this action */) => dispatch(setReseau(/* parameters for this action */)),
    setFormation: (/* parameters for this action */) => dispatch(setFormation(/* parameters for this action */)),
});
const mapStateToProps = state => ({
    Team: state.team,
    Firstname: state.team.Firstname,
    Age: state.team.Age,
    Role: state.team.Role,
    Statut: state.team.Statut,
    Money: state.team.Money,
    Passion: state.team.Passion,
    Experience: state.team.Experience,
    Reseau: state.team.Reseau,
    Formation: state.team.Formation
});

export default connect(mapStateToProps, mapDispatchToProps)(TeamEditor);