30-seconds-of-react React 30 seconds learning: Full Chinese translation, learning, address: 30-seconds-of-react-zh_cn-umi, all cases with analysis, annotation, online.

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 Seconds Learning: Create a star rating component
  • React 30 Seconds Learning: Make TAB components

TextArea multi-line text

Renders a

  • Use object deconstruction to set it up<textarea>Default values for some attributes of the element.
  • Render with appropriate attributes<textarea>Element and useonChangeIn the eventcallbackThe textarea function passes the value of the textarea to the parent element.
function TextArea({
  callback,
  cols = 20,
  rows = 2,
  disabled = false,
  readOnly = false,
  placeholder = ' '
}) {
  return (
    <textarea
      cols={cols}
      rows={rows}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      onChange={({ target: { value } }) => callback(value)}
    />
  );
}
Copy the code
example 
export default function() {
  return (
    <TextArea
      placeholder="Insert some text here..."
      callback={val= > console.log(val)}
    />
  );
}
Copy the code

ps:

  • The sample code
  • Running effect

LimitedTextarea Multi-line text that limits the number of characters

Renders a multi-line text component that limits the number of characters.

  • useReact.useState()Hook to createcontentState variable and sets its value tovalue. Create a methodsetFormattedContentIf it is better thanlimitLong, it will trim the input.
  • useReact.useEffect()The hooks to invokecontentValue of the state variablesetFormattedContentMethods.
  • use<div>To the packing<textarea>and<p>Element, which displays the number of characters and binds<textarea>theonChangeEvent to callsetFormattedContentTo deal withevent.target.valueThe value of the.

Reference: Hook documentation

import React from "react";
function LimitedTextarea({ rows, cols, value, limit }) {
  // react.usestate (initial value) adds some internal state to the component by calling it in the function component
  // Returns a pair of values: the current state and a function that lets you update it, which you can call in an event handler or some other place.
  const [content, setContent] = React.useState(value);

  const setFormattedContent = text= > {
    console.log("setFormattedContent");
    // Changes are allowed only when the length meets the requirement
    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
  };

  UseEffect is an Effect Hook that executes when the component is mounted and updated
  ComponentDidMount, componentDidUpdate, and componentWillUnmount
  React.useEffect((a)= > {
    console.log("useEffect"); setFormattedContent(content); } []);return (
    <div>
      <textarea
        rows={rows}
        cols={cols}
        onChange={event= > setFormattedContent(event.target.value)}
        value={content}
      />
      <p>
        {content.length}/{limit}
      </p>
    </div>
  );
}
Copy the code
example 
export default function() {
  return <LimitedTextarea limit={32} value="Hello!" />;
}
Copy the code

ps:

  • The sample code
  • Running effect

LimitedWordTextarea multi-line text that limits the number of words

Renders a multi-line text component that limits the number of words.

  • useReact.useState()Hook to createcontentandwordCountState variables and set their values tovalueand0.
  • Create a methodsetFormattedContent, it USESString.prototype.split(' ')Convert the input to an array of words, and useArray.prototype.filter(Boolean)checklengthWhether thanlimitLong.
  • If the abovelengthMore thanlimit, trim the input, otherwise return the original input, updated accordingly in both casescontentandwordCount.
  • useReact.useEffect()The hooks to invokecontentValue of the state variablesetFormattedContentMethods.
  • use<div>To the packing<textarea>and<p>Element, which displays the number of characters and binds<textarea>theonChangeEvent to callsetFormattedContentTo deal withevent.target.valueThe value of the.
function LimitedWordTextarea({ rows, cols, value, limit }) {
  const [content, setContent] = React.useState(value);
  const [wordCount, setWordCount] = React.useState(0);

  const setFormattedContent = text= > {
    let words = text.split("");
    // words.filter(Boolean). Length Gets the length of the array
    //.filter(Boolean) equivalent to.filter((item) => {return Boolean(item)})
    // Get rid of the false element in the array
    if (words.filter(Boolean).length > limit) {
      setContent(
        text
          .split("")
          .slice(0, limit)
          .join("")); setWordCount(limit); }else {
      setContent(text);
      setWordCount(words.filter(Boolean).length); }}; React.useEffect((a)= >{ setFormattedContent(content); } []);return (
    <div>
      <textarea
        rows={rows}
        cols={cols}
        onChange={event= > setFormattedContent(event.target.value)}
        value={content}
      />
      <p>
        {wordCount}/{limit}
      </p>
    </div>
  );
}
Copy the code
example 
export default function() {
  return <LimitedWordTextarea limit={5} value="Hello there!" />;
}
Copy the code

ps:

  • The sample code
  • Running effect