[React Fundamentals] Using Refs to Access Components
2016-08-15 04:14
627 查看
When you are using React components you need to be able to access specific references to individual components. This is done by defining a
Notice: 'ref' only works in class component, not in statless component.
If we don't add "ref", three slider will mutate the same state, they won't have isolated scope.
If we want they behave differently, then we need to use it.
ref.
Notice: 'ref' only works in class component, not in statless component.
If we don't add "ref", three slider will mutate the same state, they won't have isolated scope.
If we want they behave differently, then we need to use it.
import React from 'react'; import ReactDOM from 'react-dom'; export default class App extends React.Component { constructor(){ super(); this.state = { red: 0, green: 0, blue: 0 } } update(){ this.setState({ red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value, green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value, blue: ReactDOM.findDOMNode(this.refs.blue.refs.inp).value }) } render() { return ( <div> <Slider ref="red" update={this.update.bind(this)}></Slider> {this.state.red} <hr /> <Slider ref="green" update={this.update.bind(this)}></Slider> {this.state.green} <hr /> <Slider ref="blue" update={this.update.bind(this)}></Slider> {this.state.blue} <hr /> </div> ) } } class Slider extends React.Component{ render(){ //refs will point to the input tag //if you wrap input inside div //then you need to add another ref to the input //and access input like "this.refs.red.refs.inp" return ( <div> <input type="range" ref="inp" min="0" max="255" onChange={this.props.update} /> </div> ); /*return ( <input type="range" min="0" max="255" onChange={this.props.update} /> );*/ } }
相关文章推荐
- [React] React Fundamentals: Using Refs to Access Components
- A Data Access Layer to persist business objects using attributes and reflection - Part II [无常译]
- A Data Access Layer to persist business objects using attributes and reflection - Part III [无常译]
- Convert Access files to Pocket Access using Activesync 4.2 on windows mobile 5.0
- Using dijit/Destroyable to build safe Components
- Using CoCreateObjectDotNet to Access and Use .NET Assemblies in InstallScript
- unable to update security settings Access denied for user 'root@localhost(using password:yes)'
- [Mobx] Using mobx to isolate a React component state
- How to access other computer using different name/password
- Python Web-第二周-正则表达式(Using Python to Access Web Data)
- How to access database using C++ & ADO - 如何用C++和ADO访问数据库
- [Recompose] Configure Recompose to Build React Components from RxJS Streams
- Using MATLAB to analyze principal components obtained from a molecular dynamics simulation of a pro
- Using the Microsoft Access Providers to Replace the Built-In SQL Server Providers
- Using Java SecurityManager to grant/deny access to system functions
- Seems you're trying to access 'ReactNative.Component' from the 'react-native' package. Perhaps you m
- using an enumerable built-in Ruby to access and manipulate nested data
- 2016.12.8 Using Python to Access Web Data
- [Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi
- How to determine who is logged on to a database by using Microsoft Jet UserRoster in Access 2000