如何使用 React 创建“类似推特”的剩余字符数

Question

我想用 "target character count" 为文本区域制作一个反应计数器，就像 Twitter 所做的那样，它会随着用户键入而减少。

例如，在 "Meta Description" 字段中，目标字符数为 160。因此，如果该字段为空，则数字将为 160。随着用户键入，每个字符的计数都会减少添加到输入字段，直到它达到零。

如果计数高于目标，则数字用红色写成，前面有一个减号（同样，就像 twitter）。

一种方法是监听 textarea 上的 onChange 事件，更新组件的状态（它有 textarea 和计数器），然后用它来计算长度并渲染剩余的字符柜台.

有没有更高效的方法？

Answer 1

这是您想要的粗略版本。当 chars_left 低于零时不处理，但应该很容易实现。

var TwitterInput = React.createClass({
    getInitialState: function() {
        return {
            chars_left: max_chars
        };
    },
    handleChange(event) {
        var input = event.target.value;
        this.setState({
            chars_left: max_chars - input.length
        });
    },
    render: function() {
        return (
            <div>
                <textarea onChange={this.handleChange.bind(this)}></textarea>
                <p>Characters Left: {this.state.chars_left}</p>
            </div>
        );
    }
});

https://jsfiddle.net/terda12/b0y4jL6t

Answer 2

我也做了一个版本，

我正在使用样式组件进行样式设置。

import React from "react";
import styled from "styled-components";

class CharCountInput extends React.Component {
  state = {
    charsLeft: null
  };

  componentDidMount() {
    this.handleCharCount(this.props.value);
  }

  handleCharCount = value => {
    const { maxChars } = this.props;
    const charCount = value.length;
    const charsLeft = maxChars - charCount;
    this.setState({ charsLeft });
  };

  handleChange = event => {
    this.handleCharCount(event.target.value);
    this.props.onChange(event);
  };

  renderCharactersLeft = () => {
    const { charsLeft } = this.state;

    let content;
    if (charsLeft >= 0) {
      content = <SpanOK>{`characters left: ${charsLeft}`}</SpanOK>;
    } else if (charsLeft != null && charsLeft < 0) {
      const string = charsLeft.toString().substring(1);
      content = <SpanError>{`too many characters: ${string}`}</SpanError>;
    } else {
      content = null;
    }
    return content;
  };

  render() {
    const { onBlur, value, type, name, placeholder } = this.props;

    return (
      <Div>
        <Input
          onChange={this.handleChange}
          value={value}
          type={type}
          name={name}
          placeholder={placeholder}
        />
        {this.renderCharactersLeft()}
      </Div>
    );
  }
}

export default CharCountInput;

const Div = styled.div`
  display: flex;
  flex-direction: column;
`;

const Input = styled.input`
  box-sizing: border-box;
  display: block;
  padding: 7px;
  width: 100%;
  margin: 0 0 0.1rem 0;
  border: 1px solid blue;
  border-radius: 7px;
  font: inherit;
  outline: none;

  &:focus {
    box-shadow: 0 0 4px blue;
  }
`;

const Span = styled.span`
  align-self: flex-end;
  font-size: 0.9rem;
  margin: 0 8px 10px 0;
`;

const SpanOK = styled(Span)`
  color: black;
`;

const SpanError = styled(Span)`
  color: red;
`;

在您的表单中：

<CharCountInput
  onChange={this.handleChange}
  value={this.state.title}
  type="text"
  maxChars={150}
  name="title"
  placeholder="Enter text here..."
/>

Answer 3

var TwitterInput = React.createClass({
    getInitialState: function() {
        return {
            chars_left: max_chars
        };
    },
    handleChange(event) {
        var input = event.target.value;
        this.setState({
            chars_left: max_chars - input.length
        });
    },
    render: function() {
        return (
            <div>
                <textarea onChange={this.handleChange.bind(this)}></textarea>
                <p>Characters Left: {this.state.chars_left}</p>
            </div>
        );
    }
});

上面来自 Keith Young 的回答效果很好（为我的 React 应用程序调整了一些）。要为最大字符数添加设置限制以使其不为负数，只需添加 maxlength={max_chars} 到文本区域元素。

Answer 4

这里使用 React Native 方式来执行此操作，但您也可以将此方法与 react.js 一起使用

//your state
constructor() {
    super();
    this.state = {
        chars_left: 500,
        chars_exceed: false,
        post_text: ''
    };
};

//handle change function 
handleChange(text) {
    this.setState({
        chars_left: text.length,
        chars_exceed: text.length >  500  ?  true  :  false,
        post_text: text,
    });
}

//input inside render
render() { 
    return (
        <View>
            //text area
            <Textarea 
                rowSpan={10} 
                value={this.state.post_text}
                onChangeText={this.handleChange.bind(this)}
                placeholder="Type here"/>
            //text balance count
            <Text>{ this.state.chars_left }/500</Text>
        </View>
    )
}

如何使用 React 创建“类似推特”的剩余字符数

How to create a “twitter like” remaining characters count with React

javascript

twitter

reactive-programming

twitter-bootstrap

reactjs