兄弟コンポーネントにカーソル位置を取得

Question

は、私は2つのコンポーネントたとしポジション。 insertToStoryにカーソル位置を取得するにはどうすればよいですか？またはこれを実装する他の方法がありますか？

Answer 1

これを達成するには、refsを使用するのが良い方法です。

1ºStoryTextAreaコンポーネントに新しい方法を追加して、カーソル位置を取得します。

class StoryTextArea extends React.Component{ 
     constructor(props) { 
     super(props); 
     this.getCursorPosition = this.getCursorPosition.bind(this); 
     } 
     getCursorPosition(){ 
      return this.refs.textarea.selectionStart; 
     } 
     render(){ 
     return <div> 
       <textarea ref="textarea"/> 
      </div> 
     } 
} 

2ºthis.refs.storyTextArea.getCursorPosition()

insertToStory = (word) => { 
    let position = this.refs.storyTextArea.getCursorPosition(); 
} 

jsfiddle example

を使用して

<StoryTextarea ref="storyTextArea" text={this.props.text} /> 

3ºコールgetCursorPosition StoryTextAreaコンポーネントに参照を追加します。