React 如何使用 Hooks 使用按钮更改尺寸？答案

【问题标题】：React How the change dimensions with button using Hooks?React 如何使用 Hooks 使用按钮更改尺寸？
【发布时间】：2021-05-23 06:09:00
【问题描述】：

如何用按钮改变div的宽度和高度？我是 React 新手，我几天前开始学习，所以请理解我有这个：

const MyRectange = styled.div`
    width:${props => props.width+'px'},
    height:${props => props.height+'px'},
    backgroundColor: "#000",
    display: 'flex',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    transition: 'all 0.5s'
`;
    let [width, setWidth] = useState(100);
    let [height, setHeight] = useState(150);
    const max = 500;
    const min = 100;

    const Draw = () => {
        width = Math.floor(Math.random() * (max - min)) + min;
        height = Math.floor(Math.random() * (max - min)) + min;
        setWidth = width;
        setHeight = height;
    }
        

    return(
        <div>
            <MyRectange
             width = {width}
             height = {height}
            >
            <p>Width: {width} px</p>
            <p>Height: {height} px</p>
            <button onClick = {() => Draw()}>Draw</button>
        </div>
    );

每次点击按钮尺寸都应更改为随机数后它不起作用，我不知道如何解决

【问题讨论】：

标签： reactjs button react-hooks

【解决方案1】：

调用setWidth 和setHeight 而不是尝试将值分配给它们：

const { useState } = React;

const max = 500;
const min = 100;

// Demo MyRectange
const MyRectange = ({ children, ...props }) => (
  <div style={{ ...props, background: 'red' }}>
    {children}
  </div>
);
    
const Demo = () => {
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(150);

  const Draw = () => {
    const width = Math.floor(Math.random() * (max - min)) + min;
    const height = Math.floor(Math.random() * (max - min)) + min;
    setWidth(width);
    setHeight(height);
  }

  return(
    <div>
      <MyRectange
       width = {width}
       height = {height}
      >
        <p>Width: {width} px</p>
        <p>Height: {height} px</p>
      </MyRectange>
      <button onClick = {() => Draw()}>Draw</button>
    </div>
  );
};

ReactDOM.render(
  <Demo />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

您可以将setWidth 和setHeight 组合成一个setDimensions：

const { useState } = React;

const max = 500;
const min = 100;

const getRandomDimension = () => Math.floor(Math.random() * (max - min)) + min;

// Demo MyRectange
const MyRectange = ({ children, ...props }) => (
  <div style={{ ...props, background: 'red' }}>
    {children}
  </div>
);
    
const Demo = () => {
  const [{ width, height }, setDimensions] = useState({ width: 100, height: 150 });

  const Draw = () => {
    setDimensions({ 
      width: getRandomDimension(), 
      height: getRandomDimension() 
    });
  }

  return(
    <div>
      <MyRectange
       width = {width}
       height = {height}
      >
        <p>Width: {width} px</p>
        <p>Height: {height} px</p>
      </MyRectange>
      <button onClick = {Draw}>Draw</button>
    </div>
  );
};

ReactDOM.render(
  <Demo />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：