javascript - 尝试将其中一个 div 设置为在 React JS 中选择时出现问题

Question

我关注 code .

我试图在我的状态中存储一个值，每次用户转到上一步时，他都可以看到他选择的内容，然后他可以更改并继续下一步。

第一步，一切正常。例如，用户选择了第二个文本并进行下一步，当他返回到这一步时，他看到第二个文本已经被选择...

问题出在第二步，我写的都是一样的，但是第二步不行。当我在第二步中单击其中一个 div 时，什么也没有发生。没有错误。请帮我找出问题所在

这是我的代码。

应用文件

    export default function App() {
     const [selected, setSelected] = useState(1);
     const [term, setTerm] = useState(1);

     const [current, setCurrent] = useState(0);

     const [data, setData] = useState({
       firstName: "bob",
       lastName: "Forest",
       age: 47
     });
      const steps = [
        {
          title: "Package Choose",
          content: (
            <PackageChoose
              setCurrent={setCurrent}
              data={data}
              setData={setData}
              selected={selected}
              setSelected={setSelected}
            />
         ),
          id: 0
        },
        {
          title: "Term",
          content: (
           <Term
            setCurrent={setCurrent}
            data={data}
            selected={term}
            setTerm={setTerm}
            setData={setData}
        />
          ),
          id: 1
        },
        {
          title: "Last step",
          content: <LastStep setCurrent={setCurrent} data={data} />,
          id: 2
        }
      ];
      return (
        <div className="App">
          <div>{steps[current].content}</div>
        </div>
      );
    }

第一步打包选择文件

    const PackageChoose = ({
      setCurrent,
      data,
      setData,
      setSelected,
      selected
    }) => {
      return (
        <div>
          <div
            onClick={() => {
              setData({ ...data, packageType: "choice" });
            }}
          >
            <SelectCard
              id={1}
              selected={selected}
              onSelect={setSelected}
              text="text 1"
            />
          </div>
          <div
            onClick={() => {
              setData({ ...data, packageType: "select" });
            }}
          >
            <SelectCard
              id={2}
              selected={selected}
              onSelect={setSelected}
              text="text 2"
             />
          </div>
          <button onClick={() => setCurrent(1)}>Next</button>
        </div>
      );
   };

第二步Term文件

   const Term = ({ setCurrent, data, setData, term, setTerm }) => {
      return (
        <div>
          <button onClick={() => setCurrent(0)}>Prev</button>
          <div
            onClick={() => {
              setData({ ...data, termType: "30 day" });
            }}
          >
            <SelectCard
              id={1}
              selected={term}
              onSelect={setTerm}
              text=" term text 1"
            />
         </div>
          <div
            onClick={() => {
              setData({ ...data, termType: "90 day" });
            }}
          >
            <SelectCard
              id={2}
              selected={term}
              onSelect={setTerm}
              text="term text 2"
            />
          </div>
          <button onClick={() => setCurrent(2)}>Next</button>
            </div>
      );
    };

SelectCard 文件，在这个文件中我使用了onSelect

   const SelectCard = ({ id, selected, onSelect, text }) => {
      const myClassName =
        id === selected
          ? Styles.selectCardWrapperActives
          : Styles.selectCardWrapper;

      return (
        <div className={classNames(myClassName)} onClick={() => onSelect(id)}>
          <div> {text} </div>
        </div>
      );
     };

请帮助我理解如何在我的代码中解决这个问题。

谢谢。

Answer 1

我编辑了你的代码。

您通过的 Prop 问题。

之前:setTerm={setTerm}，现在:setSelected={setTerm}

https://codesandbox.io/s/little-leftpad-3owuu