how to set a textarea's selection in react using state instead of a ref?

textarea css
textarea value
textarea value jquery
set textarea value javascript
textarea resize
textarea placeholder
how to display html content in textarea using javascript
textarea fixed size

i'm setting a textarea's selectionRange using a react ref, but that contradicts with the react "way" .

the ref is working perfectly .

i want to set the textarea's selectionRange using state, not a ref ( like in this code snippet )

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>
    );
  }
}

What you want to do is to set selectionStart and selectionEnd textarea properties using state without using refs? Something like this:

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

But currently it's not possible, you can take a look at all <textarea>'s properties here. So using refs in this case is perfectly fine.

HTML DOM Textarea value Property, Here is some jQuery that will remove the background when the textarea is in focus, and put it back if the textarea is left without any text inside. textArea.setWrapStyleWord (true); jScrollPane1 = new JScrollPane (textArea); As mentioned above, the text area is editable. You can play with the text area by typing and pasting text, or by deleting some parts of text or the entire content. Also try using standard key bindings for editing text within the text area.

You're looking to create a "controlled" component, as in React should control the state of the element rather than the DOM.

You're half way there, just a couple of tweaks: 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"))

As you can see, we assign a value from the component's state to the value attribute of the textarea element. To complete the process, we assign a method to update the state to the onChange attribute of the element. When the onChange event fires, it is passed into our method, we extract the updated value and update our component's state. As we're passing our method outside of the class, we have to bind this to it, as you can see in the constructor.

Hope that helps.

<textarea>, The following code creates and initializes the text area: textArea = new JTextArea (5, 20); JScrollPane scrollPane = new JScrollPane(textArea); textArea. setEditable� Definition and Usage The cols attribute specifies the visible width of a text area. Tip: The size of a textarea can also be set by the CSS height and width properties.

I see it like this:

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();
  }
}

Set value of textarea in jQuery, To create a multi-line text input, use the HTML <textarea> tag. You can set the size of a text area using the cols and rows attributes. It is used� I want to set the height of a TextArea to 100% of a Table Cell in XHTML 1.0 Transitional; I have a textarea that won't have 100% in width when I set it in CSS or plain HTML? How can I make a TextArea 100% width without overflowing when padding is present in CSS? Textarea to fill a parent container exactly, with padding

HTML5 Textarea Attributes: Here's What You Should Know �, HTML - textarea Tag - The HTML tag is used within a form to declare a textarea element - a control that allows the It won't allow the user to change the value. Definition and Usage. The value property sets or returns the contents of a text area. Note: The value of a text area is the text between the <textarea> and </textarea> tags.

Textarea Tricks, In our first example, we'll create a form with a textarea control with all its default Next, we'll use the cols and rows attributes to set the number of character the� The maxlength attribute specifies the maximum length (in characters) of a text area. Browser Support The numbers in the table specify the first browser version that fully supports the attribute.

How to Use Text Areas (The Java™ Tutorials > Creating a GUI With , On a web page this can result in scroll bars appearing on the text area if the text length overfills the space you set (be that using rows, or be that using CSS. That can be a problem when a user decides to print, particularly with 'printing' to PDF - so set a comfortably large min-height for printed textareas with a conditional CSS rule:

Comments
  • i see , so the ref is necesssary in this situation .
  • you misunderstood my problem , the problem is setting the textarea's selectionRange using State , not the inputvalue . i edited the post .
  • Ah I see. In that case, why do you think a ref isn't suitable here? You're calling a method on an element, the ref is just used to easily identify the element.
  • yes i agree, i'm using it currently , but i just want to have one single source of truth . i mean setting one state in the App parent component and then passing its properties to the children .
  • i guess a ref is necessary in this situation .
  • It is defenitly refs use case