如何在 React JS 中使用 select 選項？

Question

我在表格的每一行中都有一個 select 元素。 這是我的代碼：

const [status, setStatus] = useState('');

function statusChanged(event) {
  setStatus(event.target.value);
}

{
   todos.map((item) => (
    <tr key={item.id}>
      <td>{item.id}</td>
      <td>{item.task}</td>
      <td>{item.desc}</td>
      <td>{item.due}</td>
      <td>
        <select className="form-control" id={item.id} value={status} onChange={statusChanged}>
         <option value="Open" selected={ item.status == 'Open' ? 'selected' : false }>Open</option>
         <option value="Pending" selected={ item.status == 'Pending' ? 'selected' : false }>Pending</option>
         <option value="Completed" selected={ item.status == 'Completed' ? 'selected' : false }>Completed</option>
        </select>
      </td>
    </tr>
   ))
 }

但是，當我更改一行中的選項時，它會更改所有行中的選項。

Answer 1

根據選擇的行 ID，更新如下狀態，

import { useState } from "react";
import "./styles.css";

export default function App() {
  const data = [
    {
      id: 1001,
      task: "Task1",
      status: ""
    },
    {
      id: 1002,
      task: "Task2",
      status: ""
    },
    {
      id: 1003,
      task: "Task3",
      status: ""
    }
  ];

  const [todos, setTodos] = useState(data);

  function statusChanged(id, e) {
    console.log(e.target.value);
    setTodos((prev) => {
      const idx = prev.findIndex((v) => v.id === id);
      prev[idx] = { ...prev[idx], status: e.target.value };
      return [...prev];
    });
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <table>
        {todos.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.task}</td>
            <td>{item.desc}</td>
            <td>{item.due}</td>
            <td>
              <select
                className="form-control"
                id={item.id}
                value={item.status}
                onChange={(e) => statusChanged(item.id, e)}
              >
                <option
                  value="Open"
                  selected={item.status == "Open" ? "selected" : false}
                >
                  Open
                </option>
                <option
                  value="Pending"
                  selected={item.status == "Pending" ? "selected" : false}
                >
                  Pending
                </option>
                <option
                  value="Completed"
                  selected={item.status == "Completed" ? "selected" : false}
                >
                  Completed
                </option>
              </select>
            </td>
          </tr>
        ))}
      </table>
    </div>
  );
}

Codesandbox - https://codesandbox.io/s/distracted-rain-tu5s3?file=/src/App.js:0-1803

Answer 2

這是因為您在選擇選項中使用status作為值。 當您更改row ，您正在更新state ，並且由於所有rows引用相同的值，因此它們也會被更新。

下面的value={status}對於您擁有的每一row總是相同的，因為它是state的一個variable 。 例如，您需要有一個array ，它可以保存任何行的單個status值，然后通過從todos提取index來正確映射它。

const [status, setStatus] = useState('');

<select className="form-control" id={item.id} value={status} onChange={statusChanged}>
     ...
</select>

未經測試，我相信您可以按照以下方式做一些事情：

const [status, setStatus] = useState([]);

function statusChanged(event, index) {
   let newStatus = status;
   newStatus[index] = event.target.value;
   setStatus([...newStatus]);
}

todos.map((item, index) => (
    ...
        <select className="form-control" id={item.id} value={status[index]} onChange={() => statusChanged(index)}>
            ...
        </select>
    ...
 ))

Answer 3

你可以像下面這樣嘗試，

import { useState } from "react";

export default function App() {

  const [status, setStatus] = useState("");

  return (
    <div className="App">
      <select
        className="form-control"
        value={status}
        onChange={(e) => setStatus(e.target.value)}
      >
        <option value="Open">Open</option>
        <option value="Pending">Pending</option>
        <option value="Completed">Completed</option>
      </select>
    </div>
  );
}