如何在从选择框中选择特定选项时生成动态字段

Question

我正在使用 Antd + Reactjs，（antd 表单，输入和选择选项）通过单击按钮（+ 发送到）动态生成相同的字段组。这工作正常但是，我想根据通过从特别行中的选择框中选择该选项，而不更改所有行的其他字段。 我已附上图片，因此您可以轻松回答此问题。 genrate feilds with send to button dynamically

when select option from select box then new feild add called (sizer name)

when I select the comapny option from select box then sizer name is also remove from first row which is the main issue.I want to change feild on particular Row on which I select the option , remain row keep same according to the option

这是通过发送到按钮动态生成的 feild 代码

<Form.List name="variant_rate">
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Space
                    key={field.key}
                    style={{ display: "flex", marginBottom: 8 }}
                    align="start"
                  >
                    <Form.Item
                      {...field}
                      name={[field.name, "send_to"]}
                      fieldKey={[field.fieldKey, "send_to"]}
                      rules={[
                        {
                          required: true,
                          message: "Select where to send yarn",
                        },
                      ]}
                    >
                      <Select
                        onChange={sendToChnage}
                        onSelect={() => onSelect(index)}
                        placeholder="Send to"
                        Options={SendToOption}
                      />

                      {/* <Select
                        placeholder="Catagory"
                        Options={["A Catagory", "B Catagory", "C Catagory"]}
                      /> */}
                    </Form.Item>

                    {flag  ? (
                      <Form.Item
                        {...field}
                        name={[field.name, "sizer_id"]}
                        fieldKey={[field.fieldKey, "sizer_id"]}
                        rules={[
                          {
                            required: true,
                            message: "Please select Sizer Name",
                          },
                        ]}
                      >
                        <Select
                          placeholder="Sizer name"
                          type="sizerList"
                          Options={sizerList ? sizerList : [<LazyLoad />]}
                        />
                      </Form.Item>
                    ) : null}
                    <Form.Item
                      {...field}
                      name={[field.name, "yarn_for"]}
                      fieldKey={[field.fieldKey, "yarn_for"]}
                      rules={[
                        {
                          required: true,
                          message: "Select for which yarn received",
                        },
                      ]}
                      style={{ width: "100%" }}
                    >
                      {/* <Input
                        placeholder="Quanitity"
                      
                      /> */}
                      <Select
                        placeholder="Yarn Recieved For"
                        Options={["warp", "weft"]}
                      />
                    </Form.Item>
                    <Form.Item
                      {...field}
                      name={[field.name, "slip_no_fac"]}
                      fieldKey={[field.fieldKey, "slip_no_fac"]}
                      rules={[
                        {
                          required: true,
                          message: "Factory Slip No is Required",
                        },
                      ]}
                      style={{ width: "100%" }}
                    >
                      <Input
                        placeholder="Factoy Slip No"
                        // prefix={<UserOutlined />}
                      />
                    </Form.Item>

                    <Form.Item
                      {...field}
                      name={[field.name, "fac_bag"]}
                      fieldKey={[field.fieldKey, "fac_bag"]}
                      rules={[
                        {
                          required: true,
                          message: "Please Enter Bags Quantity!",
                        },
                      ]}
                      style={{ width: "100%" }}
                    >
                      <StyledInputNumber placeholder="bags" />
                    </Form.Item>

                    <Form.Item
                      {...field}
                      name={[field.name, "fac_cons"]}
                      fieldKey={[field.fieldKey, "fac_cons"]}
                      rules={[
                        {
                          required: true,
                          message: "Please Enter Cons Quantity!",
                        },
                      ]}
                      style={{ width: "100%" }}
                    >
                      <StyledInputNumber placeholder="Cons" />
                    </Form.Item>

                    {/* {fields.length > 1 ? ( */}
                    <MinusCircleOutlined
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                    {/* ) : null} */}
                  </Space>
                ))}
                <Form.Item>
                  <Button
                    width="187px"
                    margin="auto"
                    fontSize="16px"
                    weight="500"
                    height="auto"
                    bg="#ba3d79"
                    onClick={() => {
                      add();
                      // setVariant(true);
                    }}
                  >
                    <PlusOutlined /> Send To
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>

这是当您从选择框中选择选项时触发的 onChange 处理程序

 const sendToChnage = (value, index) => {
console.log("value,index", value, index);
if (value === "sizer") setFlag(true);
else setFlag(false);

};

这是我用来隐藏或显示新字段（sizer name）的状态

const [flag, setFlag] = React.useState(false);

Answer 1

我在开发一个项目时遇到了同样的问题，我通过 javascript 事件完成了这里是我的一些工作，可以帮助你

$(document).on("change", "select.last", function () {
        $("tr.productRow").each(function () {
            $(this).removeClass("last");
            $(this).addClass("first");
        });
        $("select.product").each(function () {
            $(this).removeClass("last");
            $(this).addClass("first");
        });
        $("input.last").each(function () {
            $(this).attr("required", "required");
            $(this).removeClass("last");
            $(this).removeAttr("readonly");
            $(this).addClass("first");
            $(this).val(1);
        });

        var selectedProduct = $(this).children("option:selected");
        var selectedProductPrice = $(this).children("option:selected").attr("data-price");
        var Quantity = $(this).parent("td").siblings("td").children("input.quantity").val();

        $(this).parent("td").next("td").children("input.price").val(selectedProductPrice);
        $(this)
            .parent("td")
            .siblings("td")
            .children("input.totalPrice")
            .val(selectedProductPrice * Quantity);

        $("#t_body").append(
            '<tr class="last productRow"> <td> <select name="products[]" class="form-control product last select2" data-live-search="true"  id="products"> <option value="" disabled selected>Choose Product</option> @foreach ($products as $key => $product) <option value="{{$product->id}}" data-price="{{ $product->price }}">{{ $product->name }}</option> @endforeach </select> </td> <td class="tdprice"> <input type="number" class="form-control price" name="price[]" min="0" readonly > </td> <td class="tdquantity"> <input type="number" class="form-control quantity last" name="quantity[]" min="0" readonly> </td> <td class="tdtotalPrice"> <input type="number" class="form-control totalPrice" id="totalPrice" name="totalPrice[]" min="0" readonly > </td> </tr>'
        );
        $(".select2").select2();
       
    });

在这里，我确实选择了一个产品来为客户生成发票，并动态包含字段以选择另一个产品。 首先，当您选择任何产品时，它将根据产品的价格和数量替换值，您可以根据需要更改数量，然后当我选择第二个产品时，相同的代码将运行，但它不会在第一个中改变任何内容选择产品

 $(document.body).on("change", "select.first", function () {
        $(this).parent("td").siblings("td").children("input.quantity").val(1);
        var selectedProduct = $(this).children("option:selected");
        var selectedProductPrice = $(this).children("option:selected").attr("data-price");
        var Quantity = $(this).parent("td").siblings("td").children("input.quantity").val();

        $(this).parent("td").next("td").children("input.price").val(selectedProductPrice);

        $(this)
            .parent("td")
            .siblings("td")
            .children("input.totalPrice")
            .val(selectedProductPrice * Quantity);
        
    });

当我们再次将第一个选定的产品更改为任何其他产品时，此代码将使用，当我们更改产品时，它将根据产品的值替换值，但我不会影响任何其他选定的产品，因为您可以查看代码。