受控组件与非受控组件

受控组件

渲染表单的 React 组件,同时被 React 控制取值的表单元素叫 受控组件。如 inputtextareaselect 等。

textarea 标签

在普通 HTML 元素中,textarea 通过其子元素定义文本。

<textarea>
这里是文本
</textarea>

在 React 中, textareainput 一样,使用 value 定义其值。

<textarea value={this.state.value}></textarea>

select 标签

在普通 HTML 元素中,select 通过 selected 属性控制和选中 option 项目。

<select>
    <option value="1">1</option>
    <option value="2" selected>2</option>
</select>

在 React 中,则通过 select 的 value 属性来确定 option 项目

<select value={this.state.value}>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

非受控组件

在 HTML 中 <input type="file" /> 允许用户从客户端选择一个或多个文件,将其上传到文件服务器,或通使用 Javascipt API 进行控制。因为它的 value 是只读的,所以它在 React 中是一个非受控组件

标签: none

评论已关闭