Question

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

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

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

2 个答案: