将自定义和第三方React表单组件与Ant设计和Typescript一起使用

The React ecosystem has a vast amount of components and libraries that you can use to easily build web applications. The Ant Design library is one of those which provides a great range of ready to go React components, complete with styling for the whole site.

React生态系统具有大量的组件和库，您可以使用它们轻松地构建Web应用程序。 Ant Design库是其中之一，它提供了很多现成的React组件，并为整个站点提供了样式。

In this article, we’ll look into how we can build a custom input to interact with the Ant Design Form component, and add a 3rd party component in order to provide greater functionality.

在本文中，我们将研究如何构建自定义输入以与Ant Design Form组件进行交互，并添加第3方组件以提供更大的功能。

建立 (Setup)

Let’s start by cloning the baseline (https://github.com/chilledoj/antd-custom-form-app) repo and installing the dependencies with Yarn.

让我们首先克隆基线( https://github.com/chilledoj/antd-custom-form-app )回购并使用Yarn安装依赖项。

git clone git@github.com:chilledoj/antd-custom-form-app.gitcd antd-custom-form-appyarn

You should now be able to run the app with yarn start which will open localhost:1234 in your browser.

现在，您应该能够使用yarn start运行应用程序，它将在浏览器中打开localhost:1234 。

Simple Antd form with username input

带有用户名输入的简单Antd表单

You can enter a username into the form and the JSON object of the form values is displayed.

您可以在表单中输入用户名，并显示表单值的JSON对象。

Form values received and displayed

表单值已接收并显示

背景 (Background)

App / index.tsx (App/index.tsx)

The App component is the main container for the form component. Rather than use a router, we are just using a null check on the state within the App component to decide whether to display the form or the results of the form. We also pass in some handlers to set and clear the results. The onSubmit handler could also have included an async request to an API and/or dispatch to a redux store.

App组件是表单组件的主要容器。 而不是使用路由器，我们只是对App组件内的状态使用空检查来决定是显示表单还是显示表单结果。 我们还传入一些处理程序来设置和清除结果。 onSubmit处理程序还可能包括对API的异步请求和/或分派给Redux存储。

const App: FC = () => {
       
  const [vals, setVa