react中的受控组件_React中的受控形式

react中的受控组件

React is a JavaScript Library which is specifically useful for building single page applications. Learning React takes practice and for me mostly just writing code creating components and apps. Then repeating what you just did either the same problem or a new one, while starting it is difficult to understand, but as you keep doing it the more you get it and easier it becomes to code. Also, working with React you can see how useful and helpful it is.

React是一个JavaScript库，对于构建单页应用程序特别有用。 学习React需要实践，对我而言，大多数时间只是编写代码创建组件和应用程序。 然后在开始时重复您刚刚遇到的相同问题或新问题，这很难理解，但是随着您不断这样做，您将获得更多的知识，并且变得更容易编写代码。 另外，与React一起使用，您会发现它是多么有用和有帮助。

One part of working with React that I found hard at first however, through practice and trying to use it in different labs have got a good understand is Controlled Forms. A form component is common in everyday apps we use, we use forms to log user inputs. Commonly we have forms to sign up, sign in, leave a review, give feedback or a number of other uses.

但是，起初我发现很难使用React的一部分是通过实践并试图在不同的实验室中使用它，而Controlled Forms是一个很好的理解。 表单组件在我们使用的日常应用中很常见，我们使用表单来记录用户输入。 通常，我们有表格来注册，登录，发表评论，提供反馈或其他多种用途。

In React a form can be made into its own component, most forms we will be keeping state of the fields filled in by the user within the form, so we would make the form component a class component. Then within our return we can put the JSX of the form, we would have the form tags with the input tags for however many fields there are and submit button inside the form.

在React中，可以将表单制作成其自己的组件，大多数表单将保持用户在表单内填写的字段的状态，因此我们将表单组件作为类组件。 然后，在我们的退货中，我们可以放置表单的JSX，我们将拥有带有输入标签的表单标签(无论其中有多少字段)，并在表单内提交按钮。

Then we would have to place a value and onChange on the input tag, also to make our code DRY if the input tag doesn’t have a name we could also add a name. The name will equal to the name of the field also should be the same as the name of the field set in state. The value is equal to this.state.nameOfTheField. Finally the onChange is equal to a function which takes the event(handleChange). Here is an example of an input field:

然后，我们将不得不在输入标签上放置一个值和onChange，如果输入标签没有名称，我们还必须添加一个名称，以使代码变干。 名称将等于字段的名称，也应与state中设置的字段的名称相同。 该值等于this.state.nameOfTheField。 最后，onChange等于接受事件的函数(handleChange)。 这是一个输入字段的示例：

<input type="date" name="date" value={this.state.date} onChange={this.handleChange}/>

Want to read this story later? Save it in Journal.

想稍后再读这个故事吗？ 将其保存在 日记本中 。

Next we need to create the function used in the onChange. This function will take the event and set our state of the name of the event to the value of the event the user has entered. Following the above example here is one of the function:

接下来，我们需要创建onChange中使用的函数。 该函数将接收事件并将事件名称的状态设置为用户输入的事件的值。 在上面的示例之后，这里是函数之一：

handleChange = e => {
  this.setState({
    [e.target.name]: e.target.value
  })
}

So using the two examples outlined above as the user enters value into our date input our state is being updated to the users input.

因此，使用上面概述的两个示例，当用户在我们的日期输入中输入值时，我们的状态将更新为用户输入。

Then we need to submit our form and the users inputed data to a backend database where the information is stored. To do this we need to place a onSubmit value on the form tag which takes a function which will then handle the user clicking submit. Our opening form tag will look something like this:

然后，我们需要提交表单，然后用户将数据输入到存储信息的后端数据库。 为此，我们需要在表单标签上放置一个onSubmit值，该标签具有一个函数，该函数随后将处理用户单击提交的操作。 我们的开始表单标签将如下所示：

<form onSubmit={this.handleSubmit}>

Then we need to define that handleSubmit function, our function will first have a .preventDefault() placed on it to prevent a page refresh. Then we would sent a fetch request with the POST method to the backend to put the user entered information on the backend. The handleSubmit could look like this:

然后我们需要定义handleSubmit函数，我们的函数将首先放置一个.preventDefault()以防止页面刷新。 然后，我们将使用POST方法发送获取请求到后端，以将用户输入的信息放在后端。 handleSubmit可能如下所示：

handleSubmit = e => {
  e.preventDefault()
  fetch("http://localhost/INSERT POST LOCATION", {
    method: 'POST',
    headers:{
      "Content-type": "application/json"
    },
    body: JSON.stringify({
      date: this.state.date,
    }) 
   })
   .then(resp => resp.json())
   .then(data => { })
}

Lastly take the data just sent to the backend and send it to a function to update the new information on the front end. This part isn’t illustrated above because it all depends on what you want or if you want to do anything with it on the frontend. After that you can reset the form to its original state calling to setState and setting their values probably back to empty strings.

最后，获取刚发送到后端的数据，并将其发送到函数以更新前端的新信息。 上面没有说明此部分，因为这完全取决于您想要什么，或者是否要在前端上执行任何操作。 之后，您可以将窗体重置为其原始状态，以调用setState并将其值设置为空字符串。

📝 Save this story in Journal.

story将这个故事保存在Journal中 。

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

every‍💻每个星期天的早晨，您都可以在收件箱中等待本周最受关注的Tech故事。 阅读Tech Newsletter中的“值得注意” 。

翻译自: https://blog.usejournal.com/controlled-forms-in-react-cdb062e5b59

react中的受控组件