如何解决在reactjs中单击按钮时如何打印多个文本区域
在我的reactjs类组件中,我想创建一个按钮,该按钮每次单击都会打开一个新的文本区域(例如,当我单击5次时,它应该打开5个文本区域)。在当前结果中,它仅打开一个textarea。
因此,第一步,我创建了一个值为0的状态,并创建了一个应更改状态的函数:
// InitialState
state = {
value: 0,};
onChange() {
this.setState({
value: this.state.value + 1,});
}
下一步,我渲染了一个按钮并创建了if语句来显示文本区域(无效):
render() {
return (
<div>
<IconButton onClick={this.onChange.bind(this)}>
<AddCircleOutlineIcon />
</IconButton>
<br />
{this.state.value >= 1 ? this.showTextArea() : null}
</div>
);
}
这是我的showTextArea函数:
showTextArea = () => {
return (
<textarea
placeholder={this.state.placeholder}
value={this.state.value}
onChange={this.onChange1.bind(this)}
rows="2"
style={{ fontSize: "18px" }}
onFocus={(e) => (e.target.placeholder = "")}
onBlur={(e) => (e.target.placeholder = this.state.placeholder)}
/>
);
};
解决方法
您的条件是错误的。 this.state.value >= 1
应该是这样,因为在第一个文本框打开并单击后,您的按钮值为2,第一个文本框将隐藏
仅使用单个条件即可实现。像这样用for循环更改渲染方法:
render() {
return (
<div>
<IconButton onClick={this.onChange.bind(this)}>
<AddCircleOutlineIcon />
</IconButton>
<br />
{
for (let i = 0; i < this.state.value; i++) {
{this.showTextArea()}
}
}
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。