ReactJs에서 태그 입력 구성 요소 생성하기

프로젝트 설정

ReactJs를 사용하여 구성 요소를 구성합니다.essentials를 설치하는 것부터 시작합시다.우선, 우리는reactCRA를 사용하여react 프로그램을 만들거나, 초보자 패키지로 시작할 수 있습니다.React 애플리케이션을 설정합니다.

npx create-react-app tags-input
cd tags-input

시작합시다!

index.js 파일에서 기본 구성 요소 App 를 위한 코드를 작성할 것입니다. 임의로 이름을 지정할 수 있습니다.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";

const App = () => {
    return (
        <div className="App">
            <span>Hello World!</span>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

태그 입력 어셈블리

기능 구성 요소와 React의 useState 갈고리를 사용하여 상태를 유지할 것입니다.

// TagsInput.jsx
import React from "react";
const TagsInput = () => {
    const [tags, setTags] = React.useState([]);
    return (
        <div className="tags-input">
            <ul>
                {tags.map((tag, index) => (
                    <li key={index}>
                        <span>{tag}</span>
                        <i className="material-icons">close</i>
                    </li>
                ))}
            </ul>
            <input
                type="text"
                placeholder="Press enter to add tags"
            />
        </div>
    );
};
export default TagsInput;

우리는 상태에 표시된 그룹을 저장하기 때문에, 그것을 빈 그룹으로 초기화할 수 있습니다.useState 갈고리는 현재 상태와 상태를 업데이트할 수 있는 함수 두 개의 값을 되돌려줍니다. 우리는 그룹 분해를 사용하여 useState 에서 이 두 개의 값을 가져옵니다.우리의 예에서 현재 상태는 호출되고 tags, 업데이트 함수는 호출된다 setTags.
그리고 되돌아오는 함수에서, 우리는 tags 그룹을 비추고, 이 상태에서 사용자가 추가할 모든 표시를 표시합니다.

태그 기능 추가

태그를 추가하는 기능을 만듭니다.우리는 onKeyUp 태그에 이벤트 처리 프로그램 input 을 추가하고 addTags() 이라는 함수를 되돌려주고 event 을 매개 변수로 전송할 것입니다.

// TagsInput.jsx
...
<input
    type="text"
    onKeyUp={event => addTags(event)}
    placeholder="Press enter to add tags"
/>
...

다음은 구성 요소에서 addTags() 위의 return 함수를 정의합니다.

// TagsInput.jsx
import React from "react";
const TagsInput = () => {
    const [tags, setTags] = React.useState([]);
    const addTags = event => {
        if (event.key === "Enter" && event.target.value !== "") {
            setTags([...tags, event.target.value]);
            event.target.value = "";
        }
    };
    return (
    ...
    );
};

사용자가 Enter 키를 눌렀을 때만 탭이 상태에 추가될 수 있도록 키 코드를 사용할 수 있습니다.이외에도 빈 태그를 상태에 추가하는 것을 방지하는 또 다른 조건을 추가했습니다.
그리고 if 조건을 사용합니다. 만약 사실이라면, 우리는 setTags() 함수를 사용하여 사용자가 입력한 라벨을 추가할 수 있습니다.여기에spread 조작부호 (...tags 를 사용하여 우리가 가지고 있는 태그를 먼저 추가한 다음 사용자가 방금 입력한 태그에 추가합니다.이 문법은 사용자가 새로운 태그를 입력할 수 있도록 전송된 태그가 태그 그룹의 마지막 부분에 추가되는지 확인하는 것뿐입니다. 마지막으로 우리는 입력 태그에서 값을 삭제합니다.

태그 제거 기능

태그를 삭제하려면 모든 태그에 있는 닫기 아이콘 을 클릭합니다.태그 삭제 기능을 처리하기 위해 onClick 이벤트 처리 프로그램을 전달하고 있습니다.

// TagsInput.jsx
...
{tags.map((tag, index) => (
    <li key={index}>
        <span>{tag}</span>
        <i
            className="material-icons"
            onClick={() => removeTags(index)} 
        >
            close
        </i>
    </li>
))}
...

사용자가 닫기 아이콘을 누르고 삭제할 태그 removeTags() 를 전달하면 index 를 되돌려줍니다.현재 addTags() 의 바로 아래에 removeTags() 을 추가합니다.

// TagsInput.jsx
...
const addTags = event => {
    ...
};
const removeTags = index => {
    setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
};
...

사용자가 삭제하고자 하는 태그index를 전달하고 있기 때문에, 태그의 색인에 따라 태그를 삭제할 수 있습니다.위 코드의 여덟 번째 줄에서, 우리는 단지 우리의 표기 그룹을 교체할 뿐, 사용자가 삭제하고자 하는 표기와 일치하는 색인을 찾을 뿐, 찾으면 필터링되고, 나머지 표기는 결과 그룹에 보존될 것이다.마지막으로, 우리는spread 조작부호를 다시 사용하여 생성된 표시를 그룹에 전달한 다음 filter() 업데이트 상태를 사용합니다.

기본 구성 요소로 태그 가져오기

// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";

import TagsInput from './TagsInput';

const App = () => {
    return (
        <div className="App">
            <TagsInput />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

이제 기본 구성 요소에 사용자가 추가한 태그를 어떻게 얻을 수 있습니까?기본 구성 요소에서 setTags() 라는 함수를 설명하고 도구로 selectedTags 구성 요소에 전달할 것입니다.

...
const App = () => {
    const selectedTags = tags => console.log(tags)};
    return (
        <div className="App">
            <TagsInput selectedTags={selectedTags}/>
        </div>
    );
};
...

TagsInput 구성 요소에서, 우리는 현재 TagsInput 방법을 호출하고, 표기 수조를 우리의 기본 구성 요소에 전달할 수 있다.

// TagsInput.jsx
...
const TagsInput = props => {
    const [tags, setTags] = React.useState([]);
    const addTags = event => {
        if (event.key === "Enter" && event.target.value !== "") {
            setTags([...tags, event.target.value]);
            props.selectedTags([...tags, event.target.value]);
            event.target.value = "";
        }
    };
    ...
};

우리는 selectedTags 구성 요소에 props 매개 변수로 전달되었음을 알 수 있습니다.기본 구성 요소에서 전달된 TagsInput 에 액세스하는 데 사용됩니다.위 코드의 9줄에서 우리는 selectedTags() 방법을 호출하여 8줄selectedTags()과 같은 매개 변수를 전달한다.주의, 나는 우리가 setTags에서 해체한 tags 자체를 전달하여 낡은 표기 그룹을 전달하지 않았다.
이제 사용자가 새 태그를 추가할 때마다 기본 구성 요소는 업데이트 태그 그룹에 접근할 수 있습니다.

Codepen 데모

읽어주셔서 감사합니다. 제가 여기 있는 첫 번째 블로그입니다. - 어떤 피드백도 환영합니다!( https://www.prvnbist.com/blog/create-a-tags-input-component-in-react )!