[英]react does not re-render on state change
我有这个功能组件:
const PriorityInput = () => {
const [isActive, setIsActive] = useState({
taskPriorityLow: false,
taskPriorityMedium: false
});
const onPriorityClick = name => {
Object.keys(isActive).forEach(key =>
key === name ? setIsActive({ ...isActive, [key]: true }) : setIsActive({ ...isActive, [key]: false })
);
};
return (
<div className="task-priority-input-container">
<label className="task-priority-input-label">Priority</label>
<span
className={
isActive.taskPriorityLow
? "task-priority-button task-priority-low-active"
: "task-priority-button task-priority-low"
}
onClick={() => onPriorityClick("taskPriorityLow")}
>
LOW
</span>
<span
className={
isActive.taskPriorityLow
? "task-priority-button task-priority-medium-active"
: "task-priority-button task-priority-medium"
}
onClick={() => onPriorityClick("taskPriorityMedium")}
>
MEDIUM
</span>
</div>
);
};
export default TaskForm;
但是,当我单击span
它的样式不会改变。
从类似的问题中,我了解到使用扩展对象调用setIsActive()
会触发重新渲染。
Jan。我认为没有必要使用 foreach 语句。
试图这样做。
const PriorityInput = () => { const [isActive, setIsActive] = React.useState({ taskPriorityLow: false, taskPriorityMedium: false, taskPriorityHigh: false, }); const onPriorityClick = name => { console.log("clicked - ", name); const updateActive = {...isActive}; Object.keys(isActive).forEach(key => { if(key === name) updateActive[key] = true; else updateActive[key] = false; }); setIsActive(updateActive); }; return ( <div className="container"> <label className="input-label">Priority</label> <span className={ isActive.taskPriorityLow ? "btn btn-primary" : "btn btn-secondary" } onClick={() => onPriorityClick("taskPriorityLow")} > LOW </span> <span className={ isActive.taskPriorityMedium ? "btn btn-primary" : "btn btn-secondary" } onClick={() => onPriorityClick("taskPriorityMedium")} > MEDIUM </span> <span className={ isActive.taskPriorityHigh ? "btn btn-primary" : "btn btn-secondary" } onClick={() => onPriorityClick("taskPriorityHigh")} > HIGH </span> </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<PriorityInput />, rootElement);
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script> <div id="root"></div>
而不是这个
Object.keys(isActive).forEach(key =>
key === name ? setIsActive({ ...isActive, [key]: true }) : setIsActive({ ...isActive, [key]: false })
);
你可以直接写
setIsActive({ ...isActive, [name]: true })
这应该有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.