reactjs - 当我按下按钮时，我想添加许多员工，但只剩下一个。 react

Question

早上好，我有一个问题。当我按下 + 按钮时，只添加了一个员工行，我希望按我多次添加它
ReactJS 组件代码:

class Home extends React.Component {

    state = { showForm:false }

    showForm = () => {
        return(
            <Employee />
        )
    }

    render() {
        return (
            <div className='container-home'>
                <div className='min-margin'>
                    <Employee />
                    {this.state.showForm ? this.showForm() : null}
                    <div className='container-append'>
                        <button onClick={() => this.setState({showForm: true})}>➕</button>

                    </div>
                </div>
            </div>
        )
    }
}

Answer 1

您只需单击即可显示和隐藏输入。
你需要:

添加到状态数组:(输入:[“Employee-0”])

  state = {
    showForm: false,
    inputs: ["Employee-0"]
  };

添加到函数

  handleAddInput = e => {
    e.preventDefault();
    const inputState = this.state.inputs;
    let inputs = inputState.concat([`Employee-${inputState.length}`]);
    this.setState({
      inputs
    });
  };

  handleShowForm = e => {
    e.preventDefault();
    this.setState({
      ...this.state,
      showForm: !this.state.showForm
    })
  }

更改渲染中的代码

  render() {
    return (
      <div className="App">
        {this.state.showForm && <form>
          {this.state.inputs.map((input, idx) => (
            <Employee key={idx}/>
          ))}
        </form>}
        <button onClick={this.handleAddInput}>Add New Employee</button>
        <button onClick={this.handleShowForm}>Show form</button>
      </div>
    );
  }

单击按钮)