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

Question

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

这是我的文本框的代码：

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;

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

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

How do I have a button that triggers a new text box to be created? (react)

javascript

textbox

button

reactjs

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

How do I have a button that triggers a new text box to be created? (react)

javascript

textbox

button

reactjs

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