javascript - Manage Focus on stateless Components - React - Stack Overflow

admin管理员组

文章数量:1345165

Having a container Component which hold state. it renders a number of stateless ponents.

I want to get access to all of their DOM nodes, so i can call the focus method on demand.

I am trying the ref approach as it is encouraged by the react documentation.

I'm getting the following error: Warning: Stateless function ponents cannot be given refs. Attempts to access this ref will fail.

What is the remended way to get around this error? preferably, without extra dom elements wrappers like exra divs. Here is my Current Code:

Container Component - responsible for rendering the stateless ponents.

import React, { Component } from 'react';
import StatelessComponent from './ponents/stateless-ponent.jsx'

class Container extends Component {
    constructor() {
        super()
        this.focusOnFirst = this.focusOnFirst.bind(this)
        this.state = {
            words: [
                'hello',
                'goodbye',
                'see ya'
            ]
        }
    }
    focusOnFirst() {
        this.node1.focus()
    }
    render() {
        return (
            <div>
                {
                    this.state.words.map((word,index)=>{
                        return <StatelessComponent
                        value={word}
                        ref={node => this[`node${index}`] = node}/>
                    })
                }
                <button onClick={this.focusOnFirst}>Focus on First Stateless Component</button>
            </div>
        )
    }
}

Stateless Component - for sake of simplicity, just display a text inside a div.

import React from 'react';
export default function StatelessComponent(props)  {
    return <div>props.value</div>
}

Having a container Component which hold state. it renders a number of stateless ponents.

I want to get access to all of their DOM nodes, so i can call the focus method on demand.

I am trying the ref approach as it is encouraged by the react documentation.

I'm getting the following error: Warning: Stateless function ponents cannot be given refs. Attempts to access this ref will fail.

What is the remended way to get around this error? preferably, without extra dom elements wrappers like exra divs. Here is my Current Code:

Container Component - responsible for rendering the stateless ponents.

import React, { Component } from 'react';
import StatelessComponent from './ponents/stateless-ponent.jsx'

class Container extends Component {
    constructor() {
        super()
        this.focusOnFirst = this.focusOnFirst.bind(this)
        this.state = {
            words: [
                'hello',
                'goodbye',
                'see ya'
            ]
        }
    }
    focusOnFirst() {
        this.node1.focus()
    }
    render() {
        return (
            <div>
                {
                    this.state.words.map((word,index)=>{
                        return <StatelessComponent
                        value={word}
                        ref={node => this[`node${index}`] = node}/>
                    })
                }
                <button onClick={this.focusOnFirst}>Focus on First Stateless Component</button>
            </div>
        )
    }
}

Stateless Component - for sake of simplicity, just display a text inside a div.

import React from 'react';
export default function StatelessComponent(props)  {
    return <div>props.value</div>
}

• javascript
• reactjs
• dom

Share Improve this question Follow edited Dec 10, 2017 at 15:01 LiranC asked Dec 10, 2017 at 14:55 LiranCLiranC 2,48022 gold badges3030 silver badges5656 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Stateless (functional) ponents can't expose refs directly. However, if their internal ponents can use refs, you can pass a function from the parent (the grandparent) of the stateless ponent (the parent) as a ref via ref forwarding. Use the function as the ref target of the DOM element. Now the grandparent has direct access to the DOM element ref.

See Exposing DOM Refs to Parent Components in React's documentation.

const StatelessComponent = React.forwardRef((props, ref) => (
  <div>
    <input ref={ref} {...props} />
  </div>
));

class Container extends React.Component { 
  itemRefs = []

  ponentDidMount() {
    this.focusOnFirst();
  }

  focusOnFirst = () => this.itemRefs[0].focus()

  inputRef = (ref) => this.itemRefs.push(ref)

  render() {
    return (
      <div>
        <StatelessComponent ref={this.inputRef} />
        <StatelessComponent ref={this.inputRef} />
      </div>
    )
  }
}

ReactDOM.render(
  <Container />,
  demo
)

<script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

Try this, basically you pass a callback as ref to the stateless ponents that gets the input instance an adds it to an array owned by the container

class Container extends Component {
    constructor() {
        super()
        this._inputs = [];
        this.focusOnFirst = this.focusOnFirst.bind(this)
        this.state = {
            words: [
                'hello',
                'goodbye',
                'see ya'
            ]
        }
    }
    focusOnFirst() {
        this._inputs[0].focus()
    }

    refCallback(ref) {
        this._inputs.push(ref)
    }

    render() {
        return (
            <div>
                {
                    this.state.words.map((word,index)=>{
                        return <StatelessComponent
                        value={word}
                        refCallback={this.refCallback}/>
                    })
                }
                <button onClick={this.focusOnFirst}>Focus on First Stateless Component</button>
            </div>
        )
    }
}

And the stateless get modified a little too

function StatelessComponent({refCallback, value})  {
    return <input ref={refCallback} value={value}/>
}

Here's a working plunker

本文标签： javascriptManage Focus on stateless ComponentsReactStack Overflow