JIYIK CN >

In React, use onChangeto modify the value of the text area:

1. Add onChangea property to the text area and set it to a function.
2. useStateThe value of the text area is stored in the state via the hook.
3. Update the state variable each time the user types in the text area.

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleMessageChange = event => {
    // 👇️ update textarea value
    setMessage(event.target.value);
    console.log(event.target.value);
  };

  return (
    <div>
      <label htmlFor="message">My Textarea</label>
      <textarea
        id="message"
        name="message"
        value={message}
        onChange={handleMessageChange}
      />
    </div>
  );
};

export default App;

We use useStatethe hook to textareastore the value of the element in the component's state.

We pass a function to the text area's onChangeproperty, so every time the user types in the field, handleMessageChangethe function is called.

We can access the value of the text area element on the event object as event.target.value.

The target attribute of the event is a reference to the textarea element.

After setting the value of the text area, we can access it using the message status variable.

Another approach we might see in React is through refthe use of uncontrolled fields.

import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = event => {
    // 👇️ access textarea value
    console.log(ref.current.value);
  };

  return (
    <div>
      <label htmlFor="message">My Textarea</label>
      <textarea ref={ref} id="message" name="message" />

      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default App;

Each time the button is clicked, textareathe value of will be logged to the console.

请注意, we do not textareause onChangethe attribute on the element. For uncontrolled fields, we do not track the value of the field on every keystroke, but access it when needed.

useRef()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

请注意, we have to access the current property of the ref object in order to access the textarea element on which we set the ref attribute.

When we pass a ref prop to an element, for example <textarea ref={myRef} />, React sets the ref object’s .current property to the corresponding DOM node.

useRefThe hook creates a normal JavaScript object but gives you the same ref object on every render. In other words, it's almost a memoized object value with a .current property.

We can ref.currentaccess any attribute on the textarea element through . If we record the current attribute on the ref object, it is just textareaa reference to the element.