reactjs - React 如何使用 Hooks 通过按钮更改尺寸?
问题描述
如何用按钮改变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>
);
每次单击按钮尺寸都应更改为随机数后,它不起作用,我不知道如何解决
解决方案
调用setWidth
andsetHeight
而不是尝试将值分配给它们:
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
and组合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>
推荐阅读
- r - 创建循环/函数以删除负 varImp 结果
- postgresql - PostGis Erro 无效几何
- java - 如何在lua中嵌入java代码
- javascript - 反应映射对象数组按值创建容器并将对象插入该容器
- c++ - 没有为 Makefile 创建目标的规则
- java - 我可以覆盖确定重复的 Hashsets 方式吗?
- nagios - 从 Observium 到 Icinga 的通知传输
- python - bs4 的问题,声称我正在使用 python 3 运行 bs4 的 python 2 版本
- excel - 如何使用 Microsoft Excel 生成图表
- java - Arraylist<> 为 null,尽管它已在构造函数中初始化