zoukankan      html  css  js  c++  java
  • React 中 refs 的作用

    Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:

    class CustomForm extends Component {
      handleSubmit = () => {
        console.log("Input Value: ", this.input.value)
      }
      render () {
        return (
          <form onSubmit={this.handleSubmit}>
            <input
              type='text'
              ref={(input) => this.input = input} />
            <button type='submit'>Submit</button>
          </form>
        )
      }
    }
    

      

    上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:

    function CustomForm ({handleSubmit}) {
      let inputElement
      return (
        <form onSubmit={() => handleSubmit(inputElement.value)}>
          <input
            type='text'
            ref={(input) => inputElement = input} />
          <button type='submit'>Submit</button>
        </form>
      )
    }
    

      

    code by trister
  • 相关阅读:
    on asp.net
    总结
    CSS的一点使用体会
    existence way of The malicious software
    算法空山幽谷的佳人
    杀毒软件工程师看的书籍
    经典sql语句大全
    客户提的一个需求
    机器什么时候能够学习?
    当实证资产定价遇上机器学习
  • 原文地址:https://www.cnblogs.com/tristers/p/14298455.html
Copyright © 2011-2022 走看看