React学习手册

120

｜

第

6

章

引用

引用（

ref

）这个特性允许

React

组件能够和其子元素交互。引用最常见的用途是和

UI

元素交互，以便收集用户的输入信息。比如

HTML

中

form

表单元素。这些元素已经初

始化渲染完毕，不过用户可以与之交互。当用户执行上述操作时，组件需要响应用户

的操作。

本章接下来将会构建一个应用，帮助用户管理和保存特定的十六进制颜色值。这个颜

色管理器程序允许用户将颜色添加到一个列表中。某个颜色被添加到列表中后，用

户就可以对它评级或者删除。我们将需要一个表单来收集用户提供的新颜色信息。

用户可以在相应字段中输入颜色名称和它的十六进制值。

AddColorForm

组件将会使用

一个文本输入框和一个用于选择十六进制颜色值的按钮来渲染

HTML

元素（参见示例

6-4

）。

示例

6-4

：

AddColorForm

组件

import { Component } from 'react'

class AddColorForm extends Component {

render() {

return (

<form onSubmit={e=>e.preventDefault()}>

<input type="text"

placeholder="color title..." required/>

<input type="color" required/>

<button>ADD</button>

</form>

)