Discussion :

[automa]

bonjour
j'ai besoin d'aide svp,
j ai une liste de choix dans la première ligne,
j'ai deux bouton + et - du sort quand je clique sur + une autre ligne se duplique et si je click sur - elle se supprime la ligne sauf la première ligne
voici mon code, j ai fait plusieurs tentative mais dommage je n'arrive pas.
merci pour votre aide
mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { Component } from "react";
import { Modal, Button, Select, Divider, Tooltip, Input } from "antd";
import {
  PlusOutlined,
  PlusCircleOutlined,
  MinusCircleOutlined,
} from "@ant-design/icons";
import "antd/dist/antd.css";
import { connect } from "react-redux";
 
///pour name1
const { Option } = Select;
let index1 = 0;
 
export default class app2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
      //pour name1
      inputfilds: [
        {
          items1: ["jack1", "lucy1"],
          name1: "",
        },
      ],
    };
  }
  //pour name1
  onNameChange1 = (event) => {
    this.setState({
      name1: event.target.value,
    });
  };
 
  addItem1 = () => {
    console.log("addItem1");
    const { items1, name1 } = this.state;
    this.setState({
      items1: [...items1, name1 || `New item1 ${index1++}`],
      name1: "",
    });
  };
 
  handleAddFields() {
    this.setState({
      ...this.state.inputfilds,
      items1: ["jack1", "lucy1"],
      name1: "",
    });
  }
 
  render() {
    return (
      <div>
        <div>
          {/* nom medicament */}
          {this.state.inputfilds.map((el) => {
            return (
              <div>
                <Select
                  style={{ width: 450 }}
                  placeholder="tab1"
                  dropdownRender={(menu1) => (
                    <div>
                      {menu1}
                      <Divider style={{ margin: "4px 0" }} />
                      <div
                        style={{
                          display: "flex",
                          flexWrap: "nowrap",
                          padding: 8,
                        }}
                      >
                        <Input
                          style={{ flex: "auto" }}
                          value={el.name1}
                          onChange={this.onNameChange1}
                        />
                        <a
                          style={{
                            flex: "none",
                            padding: "8px",
                            display: "block",
                            cursor: "pointer",
                          }}
                          onClick={this.addItem1}
                        >
                          <PlusOutlined /> Add item1
                        </a>
                      </div>
                    </div>
                  )}
                >
                  {el.items1.map((item1) => (
                    <Option key={item1}>{item1}</Option>
                  ))}
                </Select>{" "}
                <Tooltip title="search">
                  <Button
                    type="primary"
                    shape="circle"
                    icon={<PlusCircleOutlined />}
                    onClick={this.handleAddFields}
                  />
                </Tooltip>{" "}
                <Tooltip title="search">
                  <Button
                    type="primary"
                    shape="circle"
                    icon={<MinusCircleOutlined />}
                  />
                </Tooltip>{" "}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

et le APP.JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";
import ReactDOM from "react-dom";
//import App from "./App";
//import App1 from "./app1";
import App2 from "./app2";
import * as serviceWorker from "./serviceWorker";
 
ReactDOM.render(
  <React.StrictMode>
    <App2 />
  </React.StrictMode>,
  document.getElementById("root")
);
 
serviceWorker.unregister();

voici une capture