我如何有一个按钮来触发一个新的文本框被创建？（反应）答案

【问题标题】：How do I have a button that triggers a new text box to be created? (react)我如何有一个按钮来触发一个新的文本框被创建？（反应）
【发布时间】：2020-07-05 19:58:44
【问题描述】：

我有一个第一个文本框和一个“+”按钮，我想点击它来在它下面创建一个新的文本框。它需要继续在前一个下制作文本框。

这是我的文本框的代码：

import React, { Component } from "react";

class Textbox extends Component {
  state = { boxtext: "" };

handleChange = () => {
// The line below creates a copy of the state, using the spread operator
let fields = { ...this.state.boxtext };
fields = fields + "+";
this.setState({ fields });
};

render() {
return (
  <div
    style={{
      position: "absolute",
      left: "50%",
      top: "17%",
      transform: "translate(-50%, -50%)",
    }}
    className="form-group"
  >
    <label for="exampleLogicSymbol">Logic Operator</label>
    <input
      type="text"
      className="form-control"
      id="exampleInputLogic"
      aria-describedby="logicHelp"
      placeholder="enter formula"
      onChange={this.props.handleInput}
      value={this.props.content}
    ></input>
  </div>
 );
 }
}

export default Textbox;

【问题讨论】：

标签： javascript reactjs button textbox

【解决方案1】：

我能想到的一个直接解决方案是保持数组的状态，其中元素的数量等于要在 UI 中显示的框，并通过映射数组来显示框。当然，可能还有其他最佳解决方案。

import React, { Component } from "react";

class Textbox extends Component {
  state = { 
      boxtext: "",
      addBox: []
    };

handleChange = () => {
    let fields = { ...this.state.boxtext };
    fields = fields + "+";
    this.setState({ fields });
};

//Handle box addition click
addTextBox = () => {
    const boxAdded = [...this.state.addBox]
    boxAdded.push(1)
    this.setState({
        addBox: boxAdded
    })
}

render() {
    return (
            <div
                style={{
                position: "absolute",
                left: "50%",
                top: "17%",
                transform: "translate(-50%, -50%)",
                }}
                className="form-group"
            >
                <label for="exampleLogicSymbol">Logic Operator</label>
                <input
                    type="text"
                    className="form-control"
                    id="exampleInputLogic"
                    aria-describedby="logicHelp"
                    placeholder="enter formula"
                    onChange={this.props.handleInput}
                    value={this.props.content}
                />
                <button onClick={this.addTextBox}>+</button>
                {
                    this.state.addBox.map(()=>{
                        return(
                            <input
                                type="text"
                                className="form-control"
                                id="exampleInputLogic"
                                aria-describedby="logicHelp"
                                placeholder="enter formula"
                            />
                        )  
                    })
                }
            </div>
        );
    }
}

export default Textbox;

【讨论】：