javascript - 使用 onClick 按钮创建卡片元素的克隆
问题描述
我的代码有问题，找不到解决方案，基本上我试图在单击“加号”按钮时克隆卡片元素以“添加成员”。我正在与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);
我不知道在我的构造函数中放什么，也不知道在我的按钮（链接）上放什么。
解决方案
回答你所有的问题。除非您在创建类之前对父类或收到的道具进行一些计算，否则您不需要构造函数。仔细查看您的代码 - 您还没有看到props从全局状态和本地接收到的差异state，但为了做出最小的更改，我只会解释差异 -本地组件状态是在不需要与其他组件共享时，所以将其存储在状态中，而不是复制到存储，而不是将其发送到道具是不对的。而是在减速器和连接方法中使用初始状态跳过第一个参数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);
推荐阅读
- java - 如果文件名更改，如何将更改从一个分支转移到另一个分支？
- c++ - SQLite3 执行速度慢（ESP32 和 C++）？
- android - 如何将片段添加到活动 MaterialContainerTransform / sharedElementTransition？
- libreoffice-calc - 如何使用 LibreOffice Basic 函数获取单元格的行号和列号
- python - 文件夹路径和文件路径中的斜杠与反斜杠
- javascript - 无法在初始化之前调用选项卡上的方法；试图调用方法“加载”
- c++ - 正则表达式替换方法名称
- c++ - 如何使用自定义错误消息引发错误？
- reactjs - 尝试使用反应钩子显示组件
- asp.net-mvc - 注销后未清除应用程序 cookie