react中的受控组件_什么是React中的受控和非受控组件？

react中的受控组件

What are they? Why are they confusing?

这些是什么？ 他们为什么会感到困惑？

Inputs are common in the world of React. You may have come across “Controlled” and “Uncontrolled” terms, looked them up, and still are not completely sure what they mean. No worries! I’m going to go over them as well as attempt to explain why they can be confusing.

输入在React世界中很常见。 您可能遇到过“受控的”和“不受控制的”术语，在查找它们时仍然不确定它们的含义。 别担心！ 我将遍历它们，并尝试解释它们为何会造成混淆。

Let’s start with the definition of an uncontrolled input;

让我们从一个不受控制的输入的定义开始；

不受控制的组件 (Uncontrolled Component)

An uncontrolled component is a component that does not manage the base input’s value.

不受控制的组件是不管理基本输入值的组件。

This is the default behavior for the HTML input tag. You provide an onChange function to listen to changes and that is it. You make no other changes to the value of the input and accept it as is.

这是HTML输入标签的默认行为。 您提供了一个onChange函数来监听更改，仅此而已。 您无需对输入的值进行其他任何更改并按原样接受。

但是，如果我们想要更多功能怎么办？… (But what if we want more features?…)

Let’s say you want to make a hashtag input that only accepts hashtags. We’d want to include a few rules to make user input less error prone.

假设您要输入仅接受主题标签的主题标签输入。 我们希望包括一些规则，以减少用户输入错误的发生。

• No spaces
  空间不足
• Starts with ‘#’
  以。。开始 '＃'
• No special character input
  无特殊字符输入

Suddenly the default HTML input tag no longer fits our use case. We need to take control of the value by managing some state and run some validation on every key stroke. We do this by again using the onChange function to listen to what the user is inputting but this time, run our validation function, do any string manipulation, and pass the resulting value back into the input. This resulting input is a…

突然，默认HTML输入标签不再适合我们的用例。 我们需要通过管理一些状态来控制值，并对每个按键进行一些验证。 我们通过再次使用onChange函数来侦听用户输入的内容，但这一次，运行我们的验证功能，进行任何字符串操作，然后将结果value传递回输入中。 结果输入是…

受控组件 (Controlled Component)

A controlled component is a component that manages the base input’s value.

受控组件是管理基本输入值的组件。

为什么令人困惑？ (Why is it confusing?)

Notice I use the word “base” in both of my definitions. The reason being is because the idea of a controlled or uncontrolled component is only applicable to within it’s own context.

注意，我在两个定义中都使用了“ base”一词。 原因是因为受控制或不受控制的组件的概念仅适用于其自身的上下文。

Let’s say you want to apply some styling and refactor the new HashtagInput so it can be used elsewhere. You give it an onChange callback prop that notifies whenever a new hashtag has been enterred. From the context of the parent that is using HashtagInput, it is an uncontrolled component. This is because the parent does not manipulate the value of the child component, it is only listening to it. However within the context of the HashtagInput it’s base input tag is still a controlled component.

假设您要应用一些样式并重构新的HashtagInput以便可以在其他地方使用。 您可以给它一个onChange回调道具，该道具在输入新的＃标签时会发出通知。 从使用HashtagInput的父级的上下文HashtagInput ，它是不受控制的组件。 这是因为父级不操纵子级组件的值，而只是在监听它。 但是，在HashtagInput的上下文中，它的基本input标签仍是受控组件。

That is it! In the future, I’ll walk through the process of implementing a HashtagInput.

这就对了！ 将来，我将HashtagInput实现HashtagInput的过程。

翻译自: https://medium.com/@Garmega/what-are-controlled-uncontrolled-component-in-react-9a7f6299e5e0

react中的受控组件