In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
If it’s still not clear which type of component you should use for a particular situation, you might find this article on controlled versus uncontrolled inputs to be helpful.
如果你不清楚用哪一种,你应该按照文章对比受控和非受控组件。
Default Values
In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.
The file input Tag
In HTML, an lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the File API.
In React, an is always an uncontrolled component because its value can only be set by a user, and not programmatically.
在React中 总是一个非控组件,因为他的值只能由用户设置,无法编程。
You should use the File API to interact with the files. The following example shows how to create a ref to the DOM node to access file(s) in a submit handler:
In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
在大多情况下,我么推荐使用受控组件来实现表单。在一个受控组件时中,表单数据受React组件所控制。另一方法就是使用非受控组件,表单数据由DOM元素本身来处理。
To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
写一个非受控组件,你可以用ref来获取DOM中的值,而不需要使用事件处理来给state做任何更新。
For example, this code accepts a single name in an uncontrolled component: 比如,这段代码是个非受控组件接受了一个name作为输入参数:
Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
因为一个非受控组件的数据源在DOM本身,在使用非受控组件时,将React和非React代码一起使用更方便。如果你像快速写代码也不管代码的杂乱,那么使用非受控的方式会代码会少一些。否则,你应该用受控组件。
If it’s still not clear which type of component you should use for a particular situation, you might find this article on controlled versus uncontrolled inputs to be helpful.
如果你不清楚用哪一种,你应该按照文章对比受控和非受控组件。
Default Values In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.
默认值 在React的render生命周期中,表单上的值会重写DOM上的value。用一个非受控组件,当你想给它指定初始值,并让后续的更新由非受控组件控制。那么你可以指定一个默认值属性。defaultValue="Bob"
Likewise, and support defaultChecked, and
同样和 支持defaultChecked,
The file input Tag In HTML, an lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the File API.
文件输入标签 在HTML中,标签可以从设备存储中选取一个或多个文件上传到服务器或者通过File API使用javascript控制。
In React, an is always an uncontrolled component because its value can only be set by a user, and not programmatically.
在React中 总是一个非控组件,因为他的值只能由用户设置,无法编程。
You should use the File API to interact with the files. The following example shows how to create a ref to the DOM node to access file(s) in a submit handler:
你可以使用File API去处理这些文件,以下就是一个示例。