Javascript 单击reactjs中的按钮时，如何打印多IP文本区域

在我的reactjs类组件中，我想创建一个按钮，每当我点击它时，它就会打开一个新的文本区域（例如，当我点击5次时，它就会打开5个文本区域）。在当前结果中，它仅打开一个文本区域

因此，在第一步中，我创建了一个值为0的状态，并创建了一个应该更改状态的函数：

// InitialState
  state = {
    value: 0,
  };

onChange() {
    this.setState({
      value: this.state.value + 1,
    });
  }

在下一步中，我渲染了一个按钮并创建了if语句来显示textarea（这不起作用）：

render（）{
返回(


{this.state.value>=1？this.showTextArea（）：null}
);
}

这是我的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)}
      />
    );
  };

showTextArea=（）=>{
返回(
（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>
    );
}

render（）{
返回(


{
for（设i=0；i

好的，谢谢。但是，当我修改这段代码时，它只会打开我的文本区域。您能识别出任何其他错误吗，可能是我的showTextArea（）函数中的错误如下：

showTextArea=（）=>{return（（e.target.placeholder=”“）}onBlur={（e）=>（e.target.placeholder=this.state.placeholder）}/>

@RainerWinkler您需要在状态值上运行一个循环来绘制任何文本区域。请参阅上面编辑的示例。好的，非常感谢，这已经帮了很多忙。react render似乎不允许使用函数，而是使用贴图函数。我会看看这是怎么回事。

render() {
    return (
        <div>
            <IconButton onClick={this.onChange.bind(this)}>
                <AddCircleOutlineIcon />
            </IconButton>
            <br />
            {
                for (let i = 0; i < this.state.value; i++) {
                    {this.showTextArea()}
                }
            }
        </div>
    );
}