Question

大家好，我正在为我的项目使用语义UI React。在这里，我将在Modal上渲染一些内容。在这里，您可以搜索电影并单击添加，然后将其添加到下面。问题是我希望影片列表与搜索栏的开头对齐。我做不到。有什么方法可以使用Grid来实现？

这是我的代码：

    import React, {useState, useEffect} from 'react';
import {Icon, Button, Modal, Input, Item} from 'semantic-ui-react'

const CreateMovieListModal = (props) => {

    const [movieTitle, setMovieTitle] = useState('');
    const [movieList, setMovieList] = useState([]);

    function handleMovieChange (event, data) {
        setMovieTitle(data.value);
    }

    function addMovie () {
        const newMovies = [...movieList, movieTitle];
        setMovieList(newMovies);
        setMovieTitle('');
    }

    function showMovieList () {
        return movieList.map((currentMovie)=> {
        return (
            <Item.Group>
                <Item>
                <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />
                <Item.Content verticalAlign='middle'>
                <Item.Header as='a'>{currentMovie}</Item.Header>
                </Item.Content>
                </Item>
            </Item.Group>

        )
        })
    }

    return (
        <Modal open={props.isOpen} onClose={props.onClose}>
            <Modal.Header>Add a new list</Modal.Header>
            <div style={{marginTop: '10px'}}>
                <center>
                    <Input value={movieTitle} loading={false}
                     style={{width: '50%'}} 
                     onChange={handleMovieChange} 
                     placeholder='Search For Movies'
                    />
                    <Button onClick={addMovie}>Add Movie</Button>
                </center>
            </div>

            <Modal.Content scrolling>
                <div>
                    {showMovieList()}
                </div>


            </Modal.Content>
            <Modal.Actions>
                <Button primary>
                    Save <Icon name='save' />
                </Button>
            </Modal.Actions>
        </Modal>
    );
};

export default CreateMovieListModal;

Answer 1

您需要将Input和Movie列表包装到div中，并将<center>应用于该包装div：

<center>
  <div> <!-- wrapper div -->          
    <Input value={movieTitle} loading={false}
           style={{width: '50%'}} 
           onChange={handleMovieChange} 
           placeholder='Search For Movies'
           />
    <Button onClick={addMovie}>Add Movie</Button>

    <Modal.Content scrolling>
      <div>
        {showMovieList()}
      </div>
    </Modal.Content>
  </div>
</center>

在语义UI React中将项目彼此对齐

1 个答案: