从另一个组件调用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）已过时的版本可能会有点不同。