1

我正在使用 react ref 设置 textarea 的 selectionRange ，但这与 react "way" 相矛盾。

裁判工作完美。

我想使用状态设置 textarea 的 selectionRange，而不是参考（就像在这个代码片段中一样）

import React, { Component } from 'react';

export default class App extends Component {

  constructor() {
    super();

    this.state = {
      value:"some placeholder text",
    }

    this.textareaRef = React.createRef();
  }

  handleChange=({ target : { value : text } })=>{
   this.setState({value : text});
  };

  componentDidMount(){
    // setting the cursor position to the end of text on mount .
    const textareaObj = textareaRef.current;
    const cursor_pos = this.state.value.length;

    textareaObj.setSelectionRange(cursor_pos , cursor_pos );
    textareaObj.focus();
  }

  render(){
    return (
    <textarea 
      value={this.state.value} 
      onChange={this.handleChange}
      ref={textareaRef}>
    </textarea>
    );
  }
}
4

3 回答 3

1

您正在寻找创建一个“受控”组件，因为在 React 中应该控制元素的状态而不是 DOM。

您已经完成了一半，只需进行一些调整：https ://jsfiddle.net/tombarton/2s5q398c/3/

class TextArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        inputValue: 'Here is some content...'
    }
    this.onTextareaChange = this.onTextareaChange.bind(this);
  }

  onTextareaChange(e) {
    const { value } = e.target;
    this.setState(state => ({
        ...state,
      inputValue: value,
    }))
  }

  render() {
    return (
      <div>
        <textarea value={this.state.inputValue} onChange={this.onTextareaChange} />
      </div>
    )
  }
}

ReactDOM.render(<TextArea />, document.querySelector("#app"))

如您所见，我们将组件状态中的值分配给元素的value属性textarea。为了完成这个过程，我们分配了一个方法来将状态更新为onChange元素的属性。当onChange事件触发时，它被传递到我们的方法中，我们提取更新的值并更新我们组件的状态。当我们在类之外传递我们的方法时，我们必须绑定this到它，正如您在构造函数中看到的那样。

希望有帮助。

于 2019-02-11T11:05:07.457 回答
1

我是这样看的： 

export default class App extends Component {

  constructor() {
    super();

    this.state = {
      value:"some placeholder text",
    }
  }

  handleChange=({ target : { value : text } })=>{
    this.setState({value : text});
  };

  render(){
     return (
       <textarea 
         value={this.state.value} 
         onChange={this.handleChange}
         ref={this.setCursorPos}>
       </textarea>
    );
  }

  setCursorPos = (textarea) => {
    const cursor_pos = this.state.value.length;

    textarea.setSelectionRange(cursor_pos , cursor_pos );
    textarea.focus();
  }
}
于 2019-02-11T11:10:50.310 回答
1

您想要做的是使用而不使用设置selectionStart和selectionEndtextarea 属性？像这样的东西：staterefs

render(){
  const { value } = this.state;
  const startingPoint = 0;
  return (
    <textarea 
      value={this.state.value} 
      selectionStart={startingPoint}
      selectionEnd={startingPoint + value.length}
    </textarea>
  );
}

但目前不可能，你可以在这里<textarea>查看 all的属性。所以在这种情况下使用 refs 是非常好的。

于 2019-02-11T11:20:54.603 回答