React--ref

最新推荐文章于 2022-09-23 14:29:15 发布

絲丨DEAD~尛

最新推荐文章于 2022-09-23 14:29:15 发布

阅读量84

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/acit_869532/article/details/109672134

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在React中如何使用Refs来直接访问DOM节点，包括推荐的创建Ref对象的方式，直接赋值给实例属性的方法，以及即将废弃的使用refs属性的经典方法。通过Refs，可以实现对输入框值的计算并更新显示结果。

摘要由CSDN通过智能技术生成

React中我们可以使用Refs来访问 DOM 节点

使用方式：

方式一（推荐）

class Add extends React.Component {
  constructor(props) {
    super(props)
    this.num1 = React.createRef();
    this.num2 = React.createRef();
    this.result = React.createRef();
  }
  
  add = ()=>{
    let num1 = this.num1.current;
    let num2 = this.num2.current;
    let result = this.result.current;
    result.value = parseFloat(num1.value) + parseFloat(num2.value);
  }
  render(){
    return (
      <>
        <input ref={ this.num1 } />
        <input ref={ this.num2 } />
        <button onClick={ this.add }>=</button>
        <input ref={ this.result } />
      </>
    )
  }
}

方式二

class Add extends React.Component {
  add = ()=>{
    let num1 = this.num1;
    let num2 = this.num2;
    let result = this.result;
    result.value = parseFloat(num1.value) + parseFloat(num2.value);
  }
  render(){
    return (
      <>
        <input ref={ el => this.num1 = el } />
        <input ref={ el => this.num2 = el } />
        <button onClick={ this.add }>=</button>
        <input ref={ el => this.result = el } />
      </>
    )
  }
}

方式三（即将删除，不建议使用）

class Add extends React.Component {
  add = ()=>{
    let num1 = this.refs.num1;
    let num2 = this.refs.num2;
    let result = this.refs.result;
    result.value = parseFloat(num1.value) + parseFloat(num2.value);
  }
  render(){
    return (
      <>
        <input ref="num1" />
        <input ref="num2" />
        <button onClick={ this.add }>=</button>
        <input ref="result" />
      </>
    )
  }
}