如何理解无状态函数组件中的引用？_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>08 - stateless default property</title>
</head>
<body>
<div id="react-container"></div>

<script src="/uploads/allimg/210608/1406493M8-0.jpg"></script>
<script src="/uploads/allimg/210608/14064a162-1.jpg"></script>
<script src="/uploads/allimg/210608/1406492350-2.jpg"></script>
<script src="/uploads/allimg/210608/14064a109-3.jpg"></script>

<script type="text/babel">

    const { Component } = React
    const { render } = ReactDOM

    const AddColorForm = ({onNewColor}) => {

        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>
            </form>
        )

    }

    AddColorForm.propTypes = {
        onNewColor: PropTypes.func
    }

    AddColorForm.defaultProps = {
        onNewColor: f=>f
    }

    render(
      <AddColorForm />,
      document.getElementById('react-container')
    )


</script>

</body>
</html>

不太明白 <input ref={input => _title = input}/>，无状态函数没有this，不通过属性的方式，组件怎么就能获取到_title了？

###

AddColorForm

是一个函数，
input组件创建时，ref指向的函数就会把input组件实例赋值给函数内变量_title，只要在AddColorForm这个函数内的定义的任意代码块都可访问_title,包括定义的事件回调函数submit