React 30 秒速學：製做多行文本組件，限制字符數和單詞數

時間 2019-11-21

標籤 react 製做行文組件限制字符單詞欄目 React 简体版

原文原文鏈接

本文譯自：30-seconds-of-react。React 30 秒速學：全篇中文翻譯、學習，地址：30-seconds-of-react-zh_CN-umi，全部案例進行分析、註釋、上線。html

系列文章：react

TextArea多行文本

呈現一個<textarea>元素，該元素使用回調函數將其值傳遞給父組件。git

使用對象解構來設置<textarea>元素的某些屬性的默認值。
使用適當的屬性渲染<textarea>元素，並使用onChange事件中的callback函數將textarea的值傳遞給父元素。

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)} /> ); } 複製代碼

例子

export default function() {
  return (
    <TextArea placeholder="Insert some text here..." callback={val => console.log(val)} /> ); } 複製代碼

ps:github

LimitedTextarea限制字符數的多行文本

呈現限制字符數的多行文本組件。數組

使用React.useState() hook 建立content狀態變量並將其值設置爲value。建立一個方法setFormattedContent，若是它比limit長，它會修剪輸入的內容。
使用React.useEffect() hook 來調用content狀態變量值的setFormattedContent方法。
使用<div>來包裝<textarea>和<p>元素，它顯示字符數並綁定<textarea>的onChange事件來調用setFormattedContent處理 event.target.value的值。

參考： hook文檔函數

import React from "react";
function LimitedTextarea({ rows, cols, value, limit }) {
  // React.useState(初始值) 經過在函數組件裏調用它，來給組件添加一些內部 state
  // 返回一對值：當前狀態和一個讓你更新它的函數，你能夠在事件處理函數中或其餘一些地方調用這個函數。
  const [content, setContent] = React.useState(value);

  const setFormattedContent = text => {
    console.log("setFormattedContent");
    // 符合長度才容許修改
    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
  };

  // useEffect 就是一個 Effect Hook ，在組件掛載和更新時執行
  // 能夠看作 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個生命週期函數的組合
  React.useEffect(() => {
    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> ); } 複製代碼

例子

export default function() {
  return <LimitedTextarea limit={32} value="Hello!" />; } 複製代碼

ps:post

LimitedWordTextarea限制單詞數的多行文本

呈現限制單詞數的多行文本組件。學習

使用React.useState() hook 建立content和wordCount狀態變量，並將它們的值分別設置爲value和0。
建立一個方法setFormattedContent，它使用String.prototype.split(' ')將輸入轉換爲單詞數組，並使用 Array.prototype.filter(Boolean)檢查 length是否比 limit長。
若是上述length超過limit，則修剪輸入，不然返回原始輸入，在兩種狀況下都相應地更新content和wordCount。
使用React.useEffect() hook 來調用content狀態變量值的setFormattedContent方法。
使用<div>來包裝<textarea>和<p>元素，它顯示字符數並綁定<textarea>的onChange事件來調用setFormattedContent 處理 event.target.value的值。

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 獲取數組長度
    // .filter(Boolean) 等價於 .filter((item) => {return Boolean(item)})
    // 也就是說這樣寫的意思就是去除數組中爲 「假」 的元素
    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(() => {
    setFormattedContent(content);
  }, []);

  return (
    <div> <textarea rows={rows} cols={cols} onChange={event => setFormattedContent(event.target.value)} value={content} /> <p> {wordCount}/{limit} </p> </div> ); } 複製代碼

例子

export default function() {
  return <LimitedWordTextarea limit={5} value="Hello there!" />; } 複製代碼

ps:ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。