React标签组件垂直堆叠问题：如何实现水平排列？

开发React标签组件时，点击加号按钮添加标签后，标签始终垂直堆叠，期望实现标签水平排列（超出宽度时自动换行）。

问题原因 #

你目前的代码中，渲染标签列表的外层div没有设置Flex布局，默认情况下块级元素会独占一行，导致每个标签垂直堆叠。你定义的tagsContainerStyle是给输入框和加号按钮的容器使用的，并没有作用到标签列表上。

解决方案 #

给标签列表的外层容器添加Flex布局样式，让标签能够水平排列并自动换行：

1. 添加标签列表容器样式：

const tagListStyle = {
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  marginTop: '10px',
  marginBottom: '10px',
};

2. 将该样式应用到渲染标签的外层div上：

<div style={tagListStyle}>
  {tags.map((tag, index) => (
    <div key={index} style={tagStyle}>
      {tag}
      <span style={removeTagButtonStyle} onClick={() => handleRemoveTag(index)}>
        X
      </span>
    </div>
  ))}
</div>

修改后的完整组件代码 #

import React, { useState } from 'react';

const App = () => {
    const [tags, setTags] = useState([]);
    const [currentTag, setCurrentTag] = useState('');

    const handleTagChange = (event) => {
        setCurrentTag(event.target.value);
    };

    const handleAddTag = () => {
        if (currentTag.trim() !== '') {
            setTags([...tags, currentTag.trim()]);
            setCurrentTag('');
        }
    };

    const handleRemoveTag = (index) => {
        const updatedTags = [...tags];
        updatedTags.splice(index, 1);
        setTags(updatedTags);
    };

    const handleEnterPress = (event) => {
        if (event.key === 'Enter') {
            handleAddTag();
        }
    };

    const containerStyle = {
        display: 'flex',
        height: '100vh', // Adjust the height as needed
    };

    const leftContainerStyle = {
        flex: 1,
        backgroundColor: 'black',
        borderTopLeftRadius: '15px',
        borderBottomLeftRadius: '15px',
        position: 'relative',
        padding: '20px',
    };

    const friendsListStyle = {
        position: 'absolute',
        top: '5%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        color: 'white',
        fontSize: '25px',
        fontFamily: 'Arial, sans-serif',
    };

    const rightContainerStyle = {
        flex: 4,
        backgroundColor: 'white',
        borderTopRightRadius: '15px',
        borderBottomRightRadius: '15px',
        padding: '20px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'black',
        fontFamily: 'Arial, sans-serif',
    };

    const buttonStyle = {
        padding: '10px 20px',
        fontSize: '16px',
        color: 'white',
        backgroundColor: 'black',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontFamily: 'Arial, sans-serif',
        marginTop: '10px', // Adjust the marginTop for downward space
    };

    const inputStyle = {
        marginTop: '0px',
        padding: '8px',
        fontSize: '14px',
        borderRadius: '4px',
        border: '1px solid #ccc',
        marginRight: '10px',
        height: '20px', // Adjust the height as needed
    };


    const plusContainerStyle = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        marginBottom: '10px', // Adjust the marginBottom for downward space
    };


    const tagsContainerStyle = {
        display: 'flex',
        flexDirection: 'row', // Display tags horizontally
        alignItems: 'center',
        flexWrap: 'wrap', // Allow tags to wrap to the next line
        marginTop: '10px',
        marginBottom: '10px', // Add marginBottom to create space between rows
    };

    const tagStyle = {
        marginRight: '5px',
        marginBottom: '5px', // Add margin at the bottom to create space between rows
        backgroundColor: '#eee',
        padding: '5px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center', // Align text and remove button vertically
    };

    const removeTagButtonStyle = {
        marginLeft: '5px',
        cursor: 'pointer',
    };

    // 新增标签列表容器样式
    const tagListStyle = {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginTop: '10px',
        marginBottom: '10px',
    };

    return (
        <div style={containerStyle}>
            <div style={leftContainerStyle}>
                {/* Content for the left container */}
                <div style={friendsListStyle}>Friends List</div>
                <h1 style={{ fontFamily: 'Arial, sans-serif' }}>Left Container</h1>
            </div>
            <div style={rightContainerStyle}>
                {/* Content for the right container */}
                <h1 style={{ fontFamily: 'Arial, sans-serif' }}>Search for a person</h1>
                <div style={tagsContainerStyle}>
                    <input
                        type="text"
                        placeholder="Enter tags..."
                        style={inputStyle}
                        value={currentTag}
                        onChange={handleTagChange}
                        onKeyPress={handleEnterPress}
                    />
                    <div style={plusContainerStyle}>
                        <button style={buttonStyle} onClick={handleAddTag}>
                            +
                        </button>
                    </div>
                </div>
                {/* 应用标签列表样式 */}
                <div style={tagListStyle}>
                    {tags.map((tag, index) => (
                        <div key={index} style={tagStyle}>
                            {tag}
                            <span
                                style={removeTagButtonStyle}
                                onClick={() => handleRemoveTag(index)}
                            >
                                X
                            </span>
                        </div>
                    ))}
                </div>
                <button style={buttonStyle}>Search</button>
            </div>
        </div>
    );
};

export default App;

内容的提问来源于stack exchange，提问作者Ifesol