reactjs - 单击按钮获取值

Question

在我的应用程序中，我尝试从表单标签中获取值。这是我要输出值的组件：

import React, { useState } from "react";

import { Form, Input, Button, Space } from "antd";
import { PlusOutlined } from "@ant-design/icons";

const Inner = props => {
  const [formVal, setFormVal] = useState([]);
  const [defaultMode, setDefaultMode] = useState(true);

  const onFinish = values => {
    setFormVal(values);
    console.log("Received values of form:", values);
  };

  const setFieldOnEdit = index => () => {
    console.log("index", index);
  };

  return (
    <Form.List onFinish={onFinish} name={[props.fieldKey, "inner"]}>
      {(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, "first"]}
                  fieldKey={[field.fieldKey, "first"]}
                  rules={[{ required: true, message: "Missing first name" }]}
                >
                  <Input placeholder="First Name" />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    Submit inner{setFieldOnEdit(index)}
                  </Button>
                </Form.Item>
              </Space>
            ))}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add field to inner
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>
  );
};
export default Inner;

现在，当我单击时，表单中的提交按钮可以正常工作：

  <Button type="primary" htmlType="submit">
    Submit inner{setFieldOnEdit(index)}
  </Button>

但我想，当我点击这个按钮时，触发和setFieldOnEdit(index)运行，并进入：

  const setFieldOnEdit = index => () => {
    console.log("index", index); //here i want to get the index when i click on  the button
  };

……那个index。但是当我点击按钮时，我只是提交表单，而不是触发setFieldOnEdit()功能。
如何触发函数并获取上述函数内部的索引？
演示：https ://codesandbox.io/s/aged-architecture-0r2si?file=/InnerForm.js

标签： reactjs

Answer 1

您可以setFieldOnEdit(index)使用 Buttons 的onClick属性调用：

<Button type="primary" htmlType="submit" onClick={setFieldOnEdit(index)}>
    Submit inner
</Button>