從另一個組件調用ref（？）

Question

我在聊天應用程序中使用React。我需要在點擊聊天框輸入消息時輸入你的消息，應該集中精力。

我的問題是，聊天框這是在主要成分，分別是從哪裏輸入的消息的輸入是組件。

看，主要成分

class ChatView extends React.Component { 

    constructor (props) { 
    super(props); 
    this._inputFocus = this._inputFocus.bind(this); 
    } 

    _inputFocus() { 
    let input = React.findDOMNode(this.refs.SHOULDFOCUS-HERE); 
    input.focus(); 
    } 
    render() { 

    if (this.props.mode === 'player') { 
     dealerPlayerMessages = <ul ref="messages">{messages}</ul>; 

     // CHAT FORM IS THE COMPONENT CONTAINING THE INPUT 
     chatForm = <ChatForm onAddMessage={this.addMessage} />; 

     chatBox = <div>{dealerPlayerMessages}{chatForm}</div> 
    } 

    return <div className="dealer-player-box" onClick={this._inputFocus} > 
     {chatBox} 
    </div>; 
    } 
} 

所以，你看，當你在類名dealer-player-box股利點擊，功能this._inputFocus被調用。

但輸入到輸入信息文本，是在組件ChatForm：

class ChatForm extends React.Component { 

    constructor (props) { 
    super(props); 
    } 

    render() { 
    return (<div className="chat-form"> 

     // THIS IS THE INPUT I NEED TO FOCUS ON 
     <input className="input-form" 
     placeholder="Your message..." 
     ref="SHOULDFOCUS-HERE" 
     autofocus="true" /> 

    </div>); 
    } 
} 

所以，從主要成分，我應該以集中於輸入自另一個組件嗎？

Answer 1

一個引用添加到您的ChatForm：

<ChatForm ref="chatForm" onAddMessage={this.addMessage} />; 

在你ChatForm改變輸入裁判有意義的事：

<input className="input-form" 
     placeholder="Your message..." 
     ref="chatInput" 
     autofocus="true" /> 

在你ChatForm組件添加其重點的方法：

focusInput() { 
    this.refs.chatInput.focus(); 
} 

在你的ChatView組件中修改_inputFocus方法：

_inputFocus() { 
    this.refs.chatForm.focusInput(); 
} 

注意，使用裁判如果你正在使用的反應（< 0.14）已過時的版本可能會有點不同。