React学习手册

124

｜

第

6

章

无状态函数式组件中的引用

引用也适用于无状态函数式组件。这些组件中没有

'this'

，因此不能通过

this.refs

这样的方式使用引用。除了使用字符串属性，我们将通过引用调用函数。该函数会将

输入实例通过参数传递给我们。我们可以获得该实例，然后将它保存为本地变量。

接下来让我们对

AddColorForm

重构，使之成为一个无状态函数式组件：

const AddColorForm = ({

onNewColor=f=>f

}) => {

let _title, _color

const submit = e => {

e.preventDefault()

onNewColor(_title.value, _color.value)

_title.value = ''

_color.value = '#000000'

_title.focus()

}

return (

<form onSubmit={submit}>

<input

ref={input => _title = input}

type="text"

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

<input

ref={input => _color = input}

type="color" required/>

<button>ADD</button> ...