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

Question

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

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

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

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 state 只是位于 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 状态