React에서 문자 수 진행률 표시줄 만들기
13565 단어 programmingjavascriptreactwebdev
이 짧은 자습서에서는 React JS에서 문자 수 진행률 표시줄을 만드는 방법을 살펴보겠습니다.
이것의 일반적인 용도는 사용자 입력을 고정된 문자 수로 제한하려는 메모 및 todolist 애플리케이션입니다. 선형 진행률 표시줄을 사용하여 사용자 경험을 개선하기 위해 이를 시각화할 수 있습니다.
간단한 텍스트 영역 만들기
먼저 새로운 반응 앱에서 간단한 텍스트 영역을 생성해 보겠습니다. App.js에는 다음 코드가 포함되어야 합니다.
import { React, useState } from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<textarea cols="20" rows="5"></textarea>
<div className="progress">
<span className="charLeft"> characters left</span>
</div>
</div>
);
}
여기에서 텍스트 영역과 남은 문자 수를 표시하는 범위가 포함된 div가 있는 간단한 반응 앱을 만들었습니다.
문자 수 제한
사용자가 입력할 수 있는 최대 문자 수는 다음과 같이 textarea의 maxLength를 사용하여 쉽게 설정할 수 있습니다.
<textarea maxLength="100" cols="20" rows="5"></textarea>
입력 텍스트 저장
다음으로 진행률 표시줄과 범위에 사용할 수 있도록 사용자가 제공하는 입력을 상태에 저장해야 합니다. 간단한 상태와 사용자가 무언가를 입력할 때마다 업데이트되는 onchange 함수를 만들 것입니다.
import { React, useState } from "react";
import "./styles.css";
export default function App() {
const [input, setInput] = useState("");
const inputHandler = (e) => {
setInput(e.target.value);
};
return (
<div className="App">
<textarea
maxLength="100"
cols="20"
rows="5"
onChange={inputHandler}
></textarea>
<div className="progress">
<span className="charLeft">
characters left
</span>
</div>
</div>
);
}
왼쪽 문자 표시
이제 입력의 길이인 100이 될 남은 문자 수를 표시해야 합니다.
<span className="charLeft">
{100 - input.length} characters left
</span>
진행률 표시줄 만들기
선형 진행률 표시줄의 경우 재료 UI 진행률 표시줄을 사용할 수 있습니다. 이를 위해 먼저 mui를 설치합니다.npm install @mui/material
다음으로 선형 진행률 구성 요소를 가져와야 합니다.
import LinearProgress from "@mui/material/LinearProgress";
막대의 값 또는 "진행률"은 value prop에 의해 정의되고 막대의 유형은 변형 prop에 의해 할당되는 결정적입니다.
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
마무리
이제 완료되었으며 이것이 완전한 코드가 될 것입니다.
import { React, useState } from "react";
import "./styles.css";
import LinearProgress from "@mui/material/LinearProgress";
export default function App() {
const [input, setInput] = useState("");
const inputHandler = (e) => {
setInput(e.target.value);
};
return (
<div className="App">
<textarea
maxLength="100"
cols="20"
rows="5"
onChange={inputHandler}
></textarea>
<div className="progress">
<span className="charLeft">{100 - input.length} characters left</span>
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
</div>
</div>
);
}
산출
Reference
이 문제에 관하여(React에서 문자 수 진행률 표시줄 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/salehmubashar/creating-a-character-count-progress-bar-in-react-3gni
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import { React, useState } from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<textarea cols="20" rows="5"></textarea>
<div className="progress">
<span className="charLeft"> characters left</span>
</div>
</div>
);
}
사용자가 입력할 수 있는 최대 문자 수는 다음과 같이 textarea의 maxLength를 사용하여 쉽게 설정할 수 있습니다.
<textarea maxLength="100" cols="20" rows="5"></textarea>
입력 텍스트 저장
다음으로 진행률 표시줄과 범위에 사용할 수 있도록 사용자가 제공하는 입력을 상태에 저장해야 합니다. 간단한 상태와 사용자가 무언가를 입력할 때마다 업데이트되는 onchange 함수를 만들 것입니다.
import { React, useState } from "react";
import "./styles.css";
export default function App() {
const [input, setInput] = useState("");
const inputHandler = (e) => {
setInput(e.target.value);
};
return (
<div className="App">
<textarea
maxLength="100"
cols="20"
rows="5"
onChange={inputHandler}
></textarea>
<div className="progress">
<span className="charLeft">
characters left
</span>
</div>
</div>
);
}
왼쪽 문자 표시
이제 입력의 길이인 100이 될 남은 문자 수를 표시해야 합니다.
<span className="charLeft">
{100 - input.length} characters left
</span>
진행률 표시줄 만들기
선형 진행률 표시줄의 경우 재료 UI 진행률 표시줄을 사용할 수 있습니다. 이를 위해 먼저 mui를 설치합니다.npm install @mui/material
다음으로 선형 진행률 구성 요소를 가져와야 합니다.
import LinearProgress from "@mui/material/LinearProgress";
막대의 값 또는 "진행률"은 value prop에 의해 정의되고 막대의 유형은 변형 prop에 의해 할당되는 결정적입니다.
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
마무리
이제 완료되었으며 이것이 완전한 코드가 될 것입니다.
import { React, useState } from "react";
import "./styles.css";
import LinearProgress from "@mui/material/LinearProgress";
export default function App() {
const [input, setInput] = useState("");
const inputHandler = (e) => {
setInput(e.target.value);
};
return (
<div className="App">
<textarea
maxLength="100"
cols="20"
rows="5"
onChange={inputHandler}
></textarea>
<div className="progress">
<span className="charLeft">{100 - input.length} characters left</span>
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
</div>
</div>
);
}
산출
Reference
이 문제에 관하여(React에서 문자 수 진행률 표시줄 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/salehmubashar/creating-a-character-count-progress-bar-in-react-3gni
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import { React, useState } from "react";
import "./styles.css";
export default function App() {
const [input, setInput] = useState("");
const inputHandler = (e) => {
setInput(e.target.value);
};
return (
<div className="App">
<textarea
maxLength="100"
cols="20"
rows="5"
onChange={inputHandler}
></textarea>
<div className="progress">
<span className="charLeft">
characters left
</span>
</div>
</div>
);
}
이제 입력의 길이인 100이 될 남은 문자 수를 표시해야 합니다.
<span className="charLeft">
{100 - input.length} characters left
</span>
진행률 표시줄 만들기
선형 진행률 표시줄의 경우 재료 UI 진행률 표시줄을 사용할 수 있습니다. 이를 위해 먼저 mui를 설치합니다.npm install @mui/material
다음으로 선형 진행률 구성 요소를 가져와야 합니다.
import LinearProgress from "@mui/material/LinearProgress";
막대의 값 또는 "진행률"은 value prop에 의해 정의되고 막대의 유형은 변형 prop에 의해 할당되는 결정적입니다.
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
마무리
이제 완료되었으며 이것이 완전한 코드가 될 것입니다.
import { React, useState } from "react";
import "./styles.css";
import LinearProgress from "@mui/material/LinearProgress";
export default function App() {
const [input, setInput] = useState("");
const inputHandler = (e) => {
setInput(e.target.value);
};
return (
<div className="App">
<textarea
maxLength="100"
cols="20"
rows="5"
onChange={inputHandler}
></textarea>
<div className="progress">
<span className="charLeft">{100 - input.length} characters left</span>
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
</div>
</div>
);
}
산출
Reference
이 문제에 관하여(React에서 문자 수 진행률 표시줄 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/salehmubashar/creating-a-character-count-progress-bar-in-react-3gni
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import LinearProgress from "@mui/material/LinearProgress";
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
이제 완료되었으며 이것이 완전한 코드가 될 것입니다.
import { React, useState } from "react";
import "./styles.css";
import LinearProgress from "@mui/material/LinearProgress";
export default function App() {
const [input, setInput] = useState("");
const inputHandler = (e) => {
setInput(e.target.value);
};
return (
<div className="App">
<textarea
maxLength="100"
cols="20"
rows="5"
onChange={inputHandler}
></textarea>
<div className="progress">
<span className="charLeft">{100 - input.length} characters left</span>
<LinearProgress
className="charProgress"
variant="determinate"
value={input.length}
/>
</div>
</div>
);
}
산출
Reference
이 문제에 관하여(React에서 문자 수 진행률 표시줄 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/salehmubashar/creating-a-character-count-progress-bar-in-react-3gni
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(React에서 문자 수 진행률 표시줄 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/salehmubashar/creating-a-character-count-progress-bar-in-react-3gni텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)