提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[React Fundamentals] Using Refs to Access Components

React to Using access Components Refs Fundamentals
2023-09-14 09:00:53 时间

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}
            />
        );*/
    }
}

 

相关文章