反应不会在状态更改时重新呈现

扬·扬科夫斯基

我有这个功能组件：

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()使用传播对象进行调用会触发重新呈现。

syJSdev

一月。我认为没有必要每个声明。

试图这样做。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。