zoukankan      html  css  js  c++  java
  • [React] Use React ref to Get a Reference to Specific Components

    When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref. This lesson will introduce us to some of the nuances when using ref.

    <input
              ref="b"
              type="text"
              onChange={this.update.bind(this)}
              />

    The way to refer to the 'ref':

    this.refs.b.value

    Also 'ref' is able to receive a callback function:

    <Input
              ref={ component => this.a = component}
              update={this.update.bind(this)}
            />
    
    
    class Input extends React.Component {
      render(){
        return <div><input ref="input" type="text" onChange={this.props.update}/></div>
      }
    }

    Now the way to access the ref value:

    this.a.refs.input.value,

    class App extends React.Component {
      constructor(){
        super();
        this.state = {a: '', b: ''}
      }
      update(){
        this.setState({
          a: this.a.refs.input.value,
          b: this.refs.b.value
        })
      }
      render(){
        return (
          <div>
            <Input
              ref={ component => this.a = component}
              update={this.update.bind(this)}
            /> {this.state.a}
            <hr />
            <input
              ref="b"
              type="text"
              onChange={this.update.bind(this)}
              /> {this.state.b}
          </div>
        )
      }
    }
    
    class Input extends React.Component {
      render(){
        return <div><input ref="input" type="text" onChange={this.props.update}/></div>
      }
    }
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );
  • 相关阅读:
    用 Web 实现一个简易的音频编辑器
    TypeScript教程
    他的独,殇情沉醉
    重新拎一遍js的正则表达式
    网络流
    Xmind最新的安装与破解教程
    adb的端口号5037被占用的解决方法
    使用Fiddler模拟弱网测试教程
    web的前台、后台、前端、后端
    常见面试笔试题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6371626.html
Copyright © 2011-2022 走看看