Question

假设我有两个组成部分：

class App extends Component {

  insertToStory = (word) => {
    // how to get the cursor position here?
  }

  render() {
    return (
      <div>
        <StoryTextarea text={this.props.text} />
        <Toolbar insert={this.insertToStory} />
      </div>
    )
  )

}

StoryTextarea包含一个textarea，Toolbar包含一个按钮，点击后，我们应该在光标位置下的textarea插入一些单词。但是如何在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º为StoryTextArea组件添加引用

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

3º使用getCursorPosition

致电this.refs.storyTextArea.getCursorPosition()

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

jsfiddle example

获取光标位置在兄弟组件中

1 个答案: