Textarea отображает неправильное количество символов в ReactJS

Question

У меня есть текстовое поле, где я показываю количество символов внизу. Я передаю ответ от API в качестве опоры, так как хочу отобразить количество символов. Моя функция onChange работает правильно, ...

javascript reactjs

0

tkamath99 20 Янв 2021 в 11:01

Answer 1

Здесь есть 2 проблемы. Во-первых, вы не обновляете значение textarea при изменении. Вторая проблема заключается в том, что вам нужно вычислять счетчик также, когда результаты поступают из API. вы можете выполнить эту работу в функции жизненного цикла componentDidUpdate, но поскольку у меня нет доступа к API, я буду использовать componentDidMount только для того, чтобы показать, что вам следует делать.

class TextAreaComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    characterCount: '1500',
    data: ""
  };
}

componentDidMount() {
    const charCount = this.props.data.length;
    const maxCharCount = this.state.characterCount;
    const charLeft = maxCharCount - charCount;
    this.setState({
      characterCount: charLeft,
      data: this.props.data
    });
}

handleWordCount = (e) => {
    const charCount = e.target.value.length;
    const maxCharCount = e.target.getAttribute("max-length");
    const charLeft = maxCharCount - charCount;
    this.setState({
      characterCount: charLeft,
      data: e.target.value
    });
 }

render() {

const { data } = this.state;
// Binding the data in value,
  return (
        <div className="personal-bio">
            <h4>Bio</h4>
            <textarea onChange={this.handleWordCount} value={data && data.length > 0 ? data : ""} max-length="1500" name="textarea" placeholder="Tell me about yourself"></textarea>
              <p className="user-bio-char-limit">Total Character limit : {this.state.characterCount}</p>
            </div>
        )
  }
}

// Passing the response data as props
ReactDOM.render(
  <TextAreaComponent data="Hello, this is my bio" />, document.body
);

textarea {
border: 1px solid #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

2

Mahdi 20 Янв 2021 в 08:42

Answer 2

Количество символов изначально неверное, потому что вы жестко кодируете его как 1500 вместо 1500 - props.data.length. Тем не менее, this.state.characterCount кажется вычисленным значением, которое не нужно хранить в состоянии. Я бы порекомендовал сохранить value в состоянии, поскольку именно эта часть действительно меняется. Затем вы можете вычислить оставшиеся символы непосредственно в части визуализации вашего компонента. Вот упрощенный функциональный компонент:

const MAX_LENGTH = 1500;

const TextAreaComponent = ({ data }) => {
  // Set the value of `data` as the initial value of the textarea.
  const [value, setValue] = useState(data);

  return (
    <div className="personal-bio">
      <h4>Bio</h4>
      <textarea
        max-length={MAX_LENGTH}
        name="textarea"
        onChange={(e) => setValue(e.target.value)}
        placeholder="Tell me about yourself"
        value={value}
      />
      <p className="user-bio-char-limit">
        Remaining characters: {MAX_LENGTH - value.length}
      </p>
    </div>
  );
};

Рабочая песочница: https://codesandbox.io/s/ecstatic-poitras-8gbwd

1

ericgio 20 Янв 2021 в 08:47

Textarea отображает неправильное количество символов в ReactJS

2 ответа

Похожие вопросы

Новые вопросы

javascript