Selamat pagi, saya punya pertanyaan. Ketika saya menekan tombol +, hanya satu baris karyawan yang ditambahkan dan saya ingin itu ditambahkan sebanyak yang saya tekan

Kode komponen 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>
        )
    }
}
2
fanjiooJr 12 Mei 2021, 17:12

4 jawaban

Jawaban Terbaik

Anda cukup mengklik untuk menampilkan dan menyembunyikan input. Anda membutuhkan:

  1. Tambahkan ke array status: (input: ["Karyawan-0"])
  state = {
    showForm: false,
    inputs: ["Employee-0"]
  };
  1. Tambahkan ke fungsi
  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
    })
  }
  1. Ubah kode di render
  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>
    );
  }
  1. Klik pada tombol)
1
Deep1man3 12 Mei 2021, 14:53

Coba ini:

import React from "react";

const Employee = (props) => {
  return(
    <div>Hello I am employee number {props.number}</div>
  )
}

class App extends React.Component {
  constructor() {
    super()
    this.state = { employees: [] }
  }


  addEmployee() {
    this.setState({
      employees: [...this.state.employees, <Employee number={this.state.employees.length} />]
    })
  }

  render() {
    return (
      <div>
        <div className='container-append'>
          <button onClick={() => this.addEmployee()}>➕</button>
        </div>
        { this.state.employees.map(employee => employee) }
      </div>
    )
  }
}
export default App;
0
Dandelion 12 Mei 2021, 15:15

Ada opsi perbedaan untuk melakukannya , tetapi itu pekerjaan yang Anda lakukan hanya sebuah bendera untuk ditampilkan dari Komponen. Jadi Anda dapat mencoba yang berikut ini:

class Home extends React.Component {

state = { 
   employeesCount: 0,
   employees: []
}

render() {
    return (
        <div className='container-home'>
            <div className='min-margin'>
                {employees.map((eNumber) => {
                    return <Employee key={eNumber}/>
                }}
                <div className='container-append'>
                    <button onClick={() => this.setState({
                        employeesCount: employeesCount + 1,
                        employees: [...this.state.employess , (employeesCount + 1)]
                    })}>➕</button>
                </div>
            </div>
        </div>
    )
  }
}
0
MHP 12 Mei 2021, 15:07

Karena ketika Anda mengklik tombol, Anda menyetel status showForm ke true, tidak peduli berapa kali Anda mengklik, itu hanya membuatnya benar sekali. Lihat versi kerja di sini. Namun jangan lupa untuk memberikan kunci unik untuk komponen Karyawan Anda tergantung pada apa yang ada di dalamnya.

https://codesandbox.io/s/great-hermann-fdqkv?file=/src/App.js

1
bdemirka 12 Mei 2021, 15:09