Как удалить свойство при уменьшении / уменьшении размера окна - PullRequest
Новая
       6

Как удалить свойство при уменьшении / уменьшении размера окна

0 голосов
/ 18 февраля 2020

У меня есть компонент таблицы здесь из antd
<Table columns={columns} dataSource={data} scroll={{ x:1000 }} pagination={{pageSize: 4}} />

По сути, я хотел удалить scroll={{ x:1000 }}, когда я увеличил окно браузера, скажем, чем 1200px. Как я могу достичь этого в React?

Функция бронирования () 

function booking() {

    return (

        <div className="booking"> 
            <Navbar bg="" variant="dark" id="mainHeader">
                <Nav className="mr-auto">
                    <img
                        src={logo}
                        width="110"
                        height="50"
                        className="d-inline-block align-top ml-4 mt-3 mb-2"
                        alt="logo"
                    />
                </Nav>
                <Nav.Link a href="/" className="ml-sm-4 text-dark">Home</Nav.Link>
                <Nav.Link a href="/bookings" className=" text-dark">Bookings</Nav.Link>
                <Nav.Link a href="/signout" className="mr-sm-4 text-dark">Sign Out</Nav.Link>
            </Navbar>

            {/* My Booking Table */}
            <header className="App-header text-dark">
                    <Card border="light" className="bookingCard" id="bookingCard" >
                        <h1 className="mt-4 ml-4" id="cardTitle">Upcoming Bookings</h1>
                        <Card.Body>
                            <Table columns={columns} dataSource={data} {...!!this.state.scroll && { scroll: { x: 1000 }}} pagination={{ pageSize: 4 }} />
                        </Card.Body>
                    </Card>
            </header>
        </div>
    );
}

Я хотел изменить Таблицу там.

1 Ответ

1 голос
/ 18 февраля 2020

Используйте resize прослушиватель событий, что-то вроде этого: 

const threshold = 1200;

window.addEventListener('resize', () => {
    const addScroll = !this.state.addScroll;
    return window.innerWidth >= threshold ^ !addScroll && this.setState({ addScroll });
});

И в render метод: 

<Table columns={columns}
       dataSource={data}
       {...!!this.state.addScroll && { scroll: { x: 1000 }}
       pagination={{ pageSize: 4 }} />

Таким образом, ваш полный код должен выглядеть так: 

class Booking extends React.Component {
    constructor () {
        const widthThreshold = 1200;

        window.addEventListener('resize', () => {
            const addScroll = !this.state.addScroll;
            return window.innerWidth >= widthThreshold ^ !addScroll && this.setState({ addScroll });
        });
    }

    render = () =>
        <div className="booking">
            <Navbar bg="" variant="dark" id="mainHeader">
                <Nav className="mr-auto">
                    <img src={logo} width="110" height="50" className="d-inline-block align-top ml-4 mt-3 mb-2" alt="logo"/>
                </Nav>
                <Nav.Link a href="/" className="ml-sm-4 text-dark">Home</Nav.Link>
                <Nav.Link a href="/bookings" className=" text-dark">Bookings</Nav.Link>
                <Nav.Link a href="/signout" className="mr-sm-4 text-dark">Sign Out</Nav.Link>
            </Navbar>

            <header className="App-header text-dark">
                <Card border="light" className="bookingCard" id="bookingCard" >
                    <h1 className="mt-4 ml-4" id="cardTitle">Upcoming Bookings</h1>
                    <Card.Body>
                        <Table columns={columns} dataSource={data} {...!!this.state.addScroll && { scroll: { x: 1000 } }} pagination={{ pageSize: 4 }} />
                    </Card.Body>
                </Card>
            </header>
        </div>;
}
...