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的div时，将调用函数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();
}

请注意，如果您使用反对的弃用版本（＆lt; 0.14），则使用ref可能会略有不同。

从另一个组件调用ref（？）

1 个答案: