如何根据布尔属性分别设置每个元素的样式？答案

【问题标题】：How to style each element individually based on their boolean property?如何根据布尔属性分别设置每个元素的样式？
【发布时间】：2023-01-12 02:01:43
【问题描述】：

我有 DATA 数组，我在其中存储包含句子和答案的对象。每个答案都有其 isCorrect 道具。

单击按钮时如何检查答案正确性？

单击按钮后，正确答案应使<select> 标签边框变为绿色，错误或未定义变为红色。

父组件：

export default function App() {
  const [isCorrect, setIsCorrect] = useState();
  const [isChecked, setIsChecked] = useState(false);

  const handleValueChange = (isCorrect) => {
    setIsCorrect(isCorrect);
  };

  return (
    <Wrapper>
      {DATA.map((sentence, index) => (
        <Sentence isCorrect={isChecked ? isCorrect : null}>
          <span>
            {index + 1}. {sentence.sentenceFirstPart}
          </span>
          <select>
            {sentence.answerOptions.map((option) => (
              <option
                onChange={() => handleValueChange(option.answerText)}
                value={option.answerText}
              >
                {option.answerText}
              </option>
            ))}
          </select>
          <span>{sentence.sentenceSecondPart}</span>
        </Sentence>
      ))}
      <button onClick={() => setIsChecked(true)}>Check</button>
    </Wrapper>
  );
}

样式组件：

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;

  button {
    padding: 0rem 1rem;
    width: 6rem;
  }
`;

export const Sentence = styled.div`
  display: flex;
  align-items: center;
  span {
    font-size: 1.2rem;
  }

  select {
    margin: 0 0.5rem;
    border: 1px solid;
    padding: 0.2rem;
    border-radius: 4px;
    font-weight: 500;
    border-color: ${({ isCorrect }) =>
      isCorrect ? "green" : !isCorrect && isCorrect !== undefined ? "red" : ""};
  }
`;

测试数据：

const DATA = [
  {
    sentenceFirstPart: "It takes a lot of",
    sentenceSecondPart: "to learn how to waterski properly",
    answerOptions: [
      { answerText: "", isCorrect: false },
      { answerText: "attempt", isCorrect: false },
      { answerText: "effort", isCorrect: true },
      { answerText: "trial", isCorrect: false },
      { answerText: "try", isCorrect: false }
    ]
  },
  {
    sentenceFirstPart: "It was Thomas Edison who ",
    sentenceSecondPart: "electricity",
    answerOptions: [
      { answerText: "", isCorrect: false },
      { answerText: "detected", isCorrect: false },
      { answerText: "invented", isCorrect: true },
      { answerText: "found", isCorrect: false },
      { answerText: "discovered", isCorrect: false }
    ]
  }
];

【问题讨论】：

虽然链接到外部代码演示是可以的（而且通常很有帮助！），但您的答案应该包括 minimal reproducible example 所需的所有源代码。

标签： javascript reactjs styled-components

【解决方案1】：

似乎 isCorrect 需要记录每个问题的结果，handleValueChange 可能应该在更改 select 时调用以更新 isCorrect 中的值。

修改后的分叉示例：codesandbox

这里 isCorrect 更新为对象以保存每个问题的结果：

const [isCorrect, setIsCorrect] = useState({});
const [isChecked, setIsChecked] = useState(false);

const handleValueChange = (value, index) => {
  setIsCorrect((prev) => ({
    ...prev,
    [index]: value === "true" ? true : false,
  }));
};

handleValueChange改为通过option的value和问题的index，所以isCorrect可以相应更新：

<Wrapper>
  {DATA.map((sentence, index) => (
    <Sentence isChecked={isChecked} isCorrect={isCorrect[index]} key={index}>
      <span>
        {index + 1}. {sentence.sentenceFirstPart}
      </span>
      <select onChange={(e) => handleValueChange(e.target.value, index)}>
        {sentence.answerOptions.map((option, index) => (
          <option value={option.isCorrect} key={index}>
            {option.answerText}
          </option>
        ))}
      </select>
      <span>{sentence.sentenceSecondPart}</span>
    </Sentence>
  ))}
  <button onClick={() => setIsChecked(true)}>Check</button>
</Wrapper>

在Sentence 中，select 可以将isChecked 和isCorrect（对于这个问题）作为设置border-color 的条件。

export const Sentence = styled.div`
  display: flex;
  align-items: center;
  span {
    font-size: 1.2rem;
  }

  select {
    margin: 0 0.5rem;
    border: 2px solid;
    padding: 0.2rem;
    border-radius: 4px;
    font-weight: 500;
    border-color: ${({ isChecked, isCorrect }) =>
      !isChecked ? "currentColor" : isCorrect ? "green" : "red"};
  }
`

【讨论】：