如何在react中创建字符计数器?

Question

我是新手，第一次用react创造一些东西。我想在react的textarea中创建一个字符计数器。计数器的最大长度应该是800个字符。我创建了这段代码，但是我不知道如何在不得到错误消息的情况下包含const。

import React from 'react'
import { Component } from 'react';
function Counter() {
return (

const rezensionTextArea = document.getElementById('rezension_textarea');
const zeichenCounter = document.getElementById('zeichen_counter');
rezensionTextArea.addEventListener('input', () => {
const zeichen = rezensionTextArea.value.length;
zeichenCounter.textContent = `${zeichen}/800`;
});
)
}
export default Counter

Answer 1

下面是一个带有react和useState钩子的textarea示例。useState返回一个状态的getter和setter数组。文本值存储在text中，并用setState更新。textarea分别使用value和onChange参数消耗handler中的状态。

import './App.css';
import { useState } from 'react';
function App() {
const MAX_TEXT_LENGTH = 800;
const [text, setText] = useState("");
function handleTextAreaChange(event) {
const value = event.target.value;
if (value.length <= MAX_TEXT_LENGTH) {
setText(value);
}
}
return (
<div className="App">
<div>
{`${text.length}/${MAX_TEXT_LENGTH}`}
</div>
<textarea rows={16} cols={64}
onChange={handleTextAreaChange}
value={text}>
</textarea>
</div>
);
}
export default App;

Answer 2

欢迎回复:)它不应该是这样的，如果你想创建一个带有counter的组件，它应该像这样:

function Counter() {
const [count, setCount] = useState(0);
return (
<div>
{/*This will increment count by 1*/}
<input type={"button"} value={"Click me"} onClick={() => setCount(count + 1)} />
{/*This will decrement the count by 1*/}
<input type={"button"} value={"Click me"} onClick={() => setCount(count - 1)} />
{/*This will display the count*/}
{count}
</div>

)}

只是跟着它玩，但这是如何在React中更新dom

Answer 3

React中的事件是通过呈现的JSX中的onEvent属性来处理的。https://reactjs.org/docs/handling-events.html
maxLength属性指定<input>&<textarea>.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
handleTextChange=(evt)=> {
this.setState({ text: evt.target.value });
}
render() {
return <div className="App">
<textarea value={this.state.text} onChange={this.handleTextChange} maxLength="800" ></textarea>
<p>count: {this.state.text.length}</p>
</div>
}
}