zoukankan      html  css  js  c++  java
  • [React Fundamentals] Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual components. This is done by defining a 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}
                />
            );*/
        }
    }
  • 相关阅读:
    Jquery简略API使用
    JS全部API笔记
    实现nginx的负载均衡和反向代理
    HashMap在Java1.7与1.8中的区别
    数据库设计三大范式
    Java集合
    Object类有哪些方法
    spring mvc出现 Failed to convert property value of type 'java.lang.String' to required type 'java.util.Date' for property 'endtime'
    int和Integer的区别
    第二次面试-科大讯飞(卒)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5771549.html
Copyright © 2011-2022 走看看