因此,我的子组件具有一个基于state.count
呈现文本字段的功能,每当用户按下按钮时,state.count
就会加一。结果,将渲染更多文本字段。文本字段具有 onChange 和 value 作为道具。如何使每个文本字段的道具唯一。在这里,我正在渲染我的文本字段:
let objects = [];
const teamVelden = () => {
for(let i = 0; i < this.state.count; i++){
objects.push(
<div>
<div className="col s5">
<TextField
id="standard-dense"
label="Teamlid volledige naam"
className={classNames(classes.textField, classes.dense)}
margin="dense"
value={this.props.teamlidValue}
onChange={this.props.onTeamlidChange}
error={this.props.tlnaamError === true ? true:false}
/>
</div>
<div className="col s6">
<TextField
id="standard-dense"
label="Teamlid email"
className={classNames(classes.textField, classes.dense)}
margin="dense"
value={this.props.teamlidEmailValue}
onChange={this.props.onTeamlidEmailhange}
error={this.props.tlemailError === true ? true:false}
/>
</div>
</div>
)
}
return objects;
};
在母亲组件中,我当前给出的文本字段值如下:
case 1:
return <StapTwee
teamlidValue={this.state.tlnaam}
onTeamlidChange={this.onTeamlidChange}
teamlidEmailValue={this.state.tlemail}
onTeamlidEmailhange={this.onTeamlidEmailhange}
/>;
我认为这些值也需要动态变化。