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

Question

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

因此，在第一步中，我创建了一个值为 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)}
      />
    );
  };

Answer 1

你的条件是错误的。 this.state.value >= 1 应该是这样的，因为在第一个文本框打开并单击按钮后，您的按钮值为 2，第一个文本框将隐藏

Answer 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>
    );
}