React 中最終形式的問題

Question

我對最終形式有一些問題。 function handleSubmit不調用任何東西。 我檢查了官方最終形式的例子。 我做的和那里寫的一樣。 但它不起作用。

這是我的表單代碼：

import React, {FunctionComponent} from 'react';
import {Field, Form} from 'react-final-form';
import {IAddComponentProps} from "./interfaces";
import {EditContainer, StyledButton} from './styles';
import EditInput from "../EditInput";

const AddComponent: FunctionComponent<IAddComponentProps> = ({onSubmitForm, onEditInput}) => {
  return (
    <Form
      onSubmit={onSubmitForm}
      render={({handleSubmit}) => (
        <EditContainer onSubmit={handleSubmit}>
          <Field name={'addComment'}>
            {({input}) => (
              <EditInput {...input} onEditInput={onEditInput}/>
            )}
          </Field>
          <StyledButton>OK</StyledButton>
        </EditContainer>
      )}
    />
  )
};

export default AddComponent;

這是我放入道具中的功能：

const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value)
  }

const onSubmitAddComment = (event: React.ChangeEvent<HTMLFormElement>) => {
    const newComment: ICommentsData = {
      id: new Date().getMilliseconds(),
      cardId: cardId,
      name: author,
      comment: inputValue
    }

    event.preventDefault();
    event.target.reset()
    dispatch(actions.comments.addComment({newComment}))
    resetInputValue()
  }

Answer 1

這樣做的原因是，我從 props 中輸入了 function Form的onSubmit 。 當我在組件內部創建 function 時，它開始工作。 所以我的表格的新代碼是：

import React, {FunctionComponent} from 'react';
import {Field, Form} from 'react-final-form';
import {IAddComponentProps} from "./interfaces";
import {EditContainer, StyledButton} from './styles';
import EditInput from "../EditInput";

const AddComponent: FunctionComponent<IAddComponentProps> = ({onSubmitForm, onEditInput}) => {

  const onSubmit = () => {
    onSubmitForm()
  }

  return (
    <Form
      onSubmit={onSubmit}
      render={({handleSubmit,form}) => (
        <EditContainer onSubmit={(event) => {
          event.preventDefault()
          handleSubmit()
          form.reset()
        }}>
          <Field name={'addComment'}>
            {({input}) => (
              <EditInput {...input} onEditInput={onEditInput}/>
            )}
          </Field>
          <StyledButton>OK</StyledButton>
        </EditContainer>
      )}
    />
  )
};

export default AddComponent;