सुप्रभात, मेरा एक प्रश्न है। जब मैं + बटन दबाता हूं, तो केवल एक कर्मचारी लाइन जोड़ी जाती है और मैं चाहूंगा कि जितनी बार मैं दबाऊं उतनी बार इसे जोड़ा जाए

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 मई 2021, 17:12

4 जवाब

सबसे बढ़िया उत्तर

आप इनपुट दिखाने और छिपाने के लिए बस क्लिक करें। आप की जरूरत है:

  1. राज्य सरणी में जोड़ें: (इनपुट: ["कर्मचारी -०"])
  state = {
    showForm: false,
    inputs: ["Employee-0"]
  };
  1. कार्यों में जोड़ें
  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. रेंडर में कोड बदलें
  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. बटन पर क्लिक करें)
1
Deep1man3 12 मई 2021, 17:53

ये कोशिश करें:

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 मई 2021, 18:15

इसे करने के लिए अंतर विकल्प मौजूद हैं, लेकिन यह वह काम है जिसे आपने एक घटक के लिए सिर्फ एक झंडा दिखाया है। तो आप इसका अनुसरण करने का प्रयास करने में सक्षम हैं:

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 मई 2021, 18:07

क्योंकि जब आप बटन पर क्लिक करते हैं तो आप शोफॉर्म स्थिति को सत्य पर सेट कर रहे हैं, इससे कोई फर्क नहीं पड़ता कि आपने कितनी बार क्लिक किया है, यह केवल एक बार सत्य बनाता है। यहां कार्यशील संस्करण देखें। हालांकि, अंदर क्या है, इसके आधार पर इसे अपने कर्मचारी घटक के लिए एक अनूठी कुंजी देना न भूलें।

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

1
bdemirka 12 मई 2021, 18:09