Question

我有一个简单的列表，其中每个 li 都有可供选择的无线电输入。

每当我选择一个选项时，所有其他元素中的所有输入都会更新为相同的选项。我在 React 文档 中提到了一个独特的 id 和一个独特的 name，以重新组合每个组并将其分开，但它不起作用。

我希望能够分别选择列表中的每个元素。怎么做？

https://codesandbox.io/s/affectionate-sun-i2khx?file=/src/App.js

import React, { useState } from "react";

export default () => {
  const initialList = [
    {
      id: "1",
      name: "John"
    },
    {
      id: "2",
      name: "Eric"
    },
    {
      id: "3",
      name: "Jonathan"
    }
  ];

  const handleChangeSelected = (event) => {
    setSelected(event.target.value);
    console.log(event);
  };

  const [list, setList] = useState(initialList);
  const [Selected, setSelected] = useState("option1");

  return (
    <div>
      <ul>
        <div>
          {list.map((item) => (
            <li key={item.id}>
              <div>
                <div className="users">{item.name}</div>
                <p />{" "}
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option1"
                  checked={Selected === "option1"}
                  onChange={handleChangeSelected}
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option2"
                  checked={Selected === "option2"}
                  onChange={handleChangeSelected}
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option3"
                  checked={Selected === "option3"}
                  onChange={handleChangeSelected}
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

https://codesandbox.io/s/affectionate-sun-i2khx?file=/src/App.js

到目前为止我尝试过但没有将输入定位到相应的 id

  function handleSelected(e, id) {
    setSelected({
      ...Selected,
      [id]: Selected[id]
    });
  }

Answer 1

如果你可以把 selected 键放在你的 intiallist 数组值中，那么你可以像下面这样处理

import React, { useState } from "react";

export default () => {
  const initialList = [
    {
      id: "1",
      name: "John",
      selected: "option1"
    },
    {
      id: "2",
      name: "Eric",
      selected: "option2"
    },
    {
      id: "3",
      name: "Jonathan",
      selected: "option1"
    }
  ];

  const handleChangeSelected = (index, option) => {
    const cloneList = [...list];
    cloneList[index].selected = option;
    setList(cloneList);
  };

  const [list, setList] = useState(initialList);

  return (
    <div>
      <ul>
        <div>
          {list.map((item, index) => (
            <li key={item.id}>
              <div>
                <div className="users">{item.name}</div>
                <p />{" "}
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option1"
                  checked={item.selected === "option1"}
                  onChange={() => handleChangeSelected(index, "option1")}
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option2"
                  checked={item.selected === "option2"}
                  onChange={() => handleChangeSelected(index, "option2")}
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option3"
                  checked={item.selected === "option3"}
                  onChange={() => handleChangeSelected(index, "option3")}
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

在此处验证https://codesandbox.io/s/thirsty-kirch-fwhpb?file=/src/App.js

Answer 2

Selected 状态只是存在于 map 函数之上的一个字符串。考虑在地图中声明它 -

// refactor your main component
{list.map((item) => (
          <ListItem item={item} />  
))}





// create new ListItem component, Selected state declared here
const ListItem = ({item}) => {
  const handleChangeSelected = (event) => {
    setSelected(event.target.value);
    console.log(event);
  };

  const [Selected, setSelected] = useState("option1");
  return <li key={item.id}>
              <div>
                <div className="users">{item.name}</div>
                <p />{" "}
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option1"
                  checked={Selected === "option1"}
                  onChange={handleChangeSelected}
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option2"
                  checked={Selected === "option2"}
                  onChange={handleChangeSelected}
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option3"
                  checked={Selected === "option3"}
                  onChange={handleChangeSelected}
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
}

现在每个映射项管理自己的 Selected 状态

反应：输入不更新不同的值

2 个答案: