[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‘)
);
时间: 2024-02-20 04:02:21

[React] Use React ref to Get a Reference to Specific Components的相关文章

[深入剖析React Native]React 初探

认识React React是一个用于构建用户界面的JavaScript库. React主要用于构建UI,很多人认为React是MVC中的V,即视图. React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源. React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和实用它. React特点 声明式设计 - React**采用声明范式**,可以轻松描述应用. 高效 - React通过对DOM的模拟,最大限度地减少与DOM的交互. 灵活 - R

从 React到React Native

React简介 RN基于React设计,了解React有利于我们开发RN应用.React希望功能分解化,让开发像搭积木一样,快速而且可维护. React的3个特点 作为UI(Just the UI) 虚拟DOM(Virtual DOM)这是亮点,是React最重要的一个特性更新View很快,放进内存,最小更新的视图差异部分更新 diff算法 数据(Data Flow)单向数据流 学习React要掌握的只是: JSX语法 类似XML ES6相关 前端基础 CSS+DIV JS 举例说明React的

React的React Native

React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边.而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,模块化的支持似乎已成定局. 我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来. 这篇文章就给还没走在这条路上的前端一

小谈React、React Native、React Web

React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出,是觉得还有些用处). React.React Native共同特点 起源 Facebook 的内部项目 理念 Learn once, write anywhere,而不是Write once, run anywhere.简单说就是,让你在Web.Mobile原生的开发套路一样,但你还是需要写两套代

[React] Remove React PropTypes by using Flow Annotations (in CRA)

Starting from v15.5 if we wanted to use React's PropTypes we had to change our code to use a separate node module, now we can go one step further and get rid of that extra dependency just by using flow type annotations in our create-react-app project

React学习笔记-1-什么是react,react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

重谈react优势——react技术栈回顾

react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优势,WTF? React的收益有哪些?React的优势是什么?react和vue.angularJS等其它框架对比优势? 而作为总结回顾.react在工程实践中,带来哪些思想上的质变? virtual dom虚拟DOM概念 它并不直接对DOM进行操作,引入了一个叫做virtual dom的概念,安插

为什么import React from &#39;react&#39;,React首字母必须大写?

很奇怪的是,明明没有用到 React,但是我不得不 import React.这是为什么? import React from 'react'; export default function (props) { return ( <form className="signIn" onSubmit={props.onSubmit}> {/* 登录*/} <form className="signIn" onSubmit={props.onSubmi

[React] Validate React Forms with Formik and Yup

Validating forms in React can take several lines of code to build. However, Formik's ErrorMessage component and Yup simplify that process. import { ErrorMessage, Field, Form, Formik } from 'formik'; import React from 'react'; import { render } from '