Question

我有这个功能组件：

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()会触发重新渲染。

Answer 1

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

尝试这样做。

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>

Answer 2

代替此

Object.keys(isActive).forEach(key =>
  key === name ? setIsActive({ ...isActive, [key]: true }) : setIsActive({ ...isActive, [key]: false })
);

您可以直接写

setIsActive({ ...isActive, [name]: true })

这应该有帮助。

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

2 个答案: