Reactjs 如何按行选择内容？

我正在动态创建和删除行，而创建行我在选择下拉菜单时创建下拉菜单下的下一个字段html更改，即输入LNAME

由于行是动态创建和删除的，所以当我添加新行和从下拉列表中选择值时，所有html都会在输入LNAME中进行更改。相反，应该只更改输入LNAME中的行html，而不是所有行的html

为ddlSelectedid和show添加数组。您可以在ddlSelectedid&show中指定单个值。更改下拉列表时，将更新所有行的下拉列表

您可以在这里检查工作代码

---

show属性应基于要显示的行id。您可以将show设置为特定的id，并使用showId==idx&&而不是show&&来检查它。您可以解释以下几行吗：ddlSelectedid[idx]=event.target.value；setDdlSelectedId[…ddlSelectedid]；show[idx]=false；设置显示[…显示]；当您单击handleSelect事件时，我们将仅更改同一行中的值。因此，我们将更改ddlSelectedid数组的idx索引中的值。您将更新状态，如setddlSelectedddlSelectedId；非常感谢你的手。。。这是一个扩展操作员。“展开”操作符将创建重复对象。您可以从这里获得有关spread operator的更多详细信息，这里仍然存在一些bug。当您删除中间一行时，您会看到一个bug。您还可以借助数组修复该错误

import React from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = React.useState({
    rows: [{}]
  });

  const handleChange = idx => e => {
    const { name, value } = e.target;
    const rows = [...state.rows];
    rows[idx] = { ...rows[idx], [name]: value }; //here
    setState({
      rows
    });
  };

  const handleAddRow = () => {
    const item = {
      fname: "",
      lname: ""
    };
    setState({
      rows: [...state.rows, item]
    });
  };

  const handleRemoveSpecificRow = idx => () => {
    const rows = [...state.rows];
    rows.splice(idx, 1);
    setState({ rows });
  };

  React.useEffect(() => {
    console.log(state);
  }, [state]);

  const [ddlSelectedid, setDdlSelectedId] = React.useState("");
  console.log(ddlSelectedid);

  const handleSelect = event => {
    setDdlSelectedId(event.target.value);
    setShow(false);
  };

  const [show, setShow] = React.useState(true);
  const selectionContent = idx => {
    if (ddlSelectedid === "INPUT") {
      return (
        <input
          type="text"
          name="lname"
          value={state.rows[idx].name}
          onChange={handleChange(idx)}
        />
      );
    } else if (ddlSelectedid === "RADIO") {
      return (
        <input
          type="radio"
          name="lname"
          value={state.rows[idx].name}
          onChange={handleChange(idx)}
        />
      );
    } else if (ddlSelectedid === "CHECKBOX") {
      return (
        <input
          type="checkbox"
          name="lname"
          value={state.rows[idx].name}
          onChange={handleChange(idx)}
        />
      );
    }
  };

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>INPUT FNAME</th>
            <th>Dropdown</th>
            <th>INPUT LNAME</th>
            <th>Button</th>
          </tr>
        </thead>
        <tbody>
          {state.rows.map((item, idx) => (
            <tr id="addr0" key={idx}>
              <td>{idx}</td>
              <td>
                <input
                  type="text"
                  name="fname"
                  value={state.rows[idx].name}
                  onChange={handleChange(idx)}
                />
              </td>
              <td>
                <select name="cars" id="cars" onChange={handleSelect}>
                  <option defaultValue="INPUT">INPUT</option>
                  <option value="RADIO">RADIO</option>
                  <option value="CHECKBOX">CHECKBOX</option>
                </select>
              </td>
              <td>
                {show && (
                  <input
                    type="text"
                    name="lname"
                    value={state.rows[idx].name}
                    onChange={handleChange(idx)}
                  />
                )}

                {!show && selectionContent(idx)}
              </td>
              <td>
                <button className="btn" onClick={handleRemoveSpecificRow(idx)}>
                  Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={handleAddRow} className="btn">
        Add Row
      </button>
    </div>
  );
}

import React from "react";
import "./styles.css";

export default function App() {
  const item = {
    fname: "",
    lname: ""
  };
  const [rows, setRows] = React.useState([item]);

  const handleChange = idx => e => {
    const { name, value } = e.target;
    rows[idx] = { ...rows[idx], [name]: value }; //here
    setRows([...rows]);
  };

  const handleAddRow = () => {
    setRows([...rows, item]);
    setDdlSelectedId([...ddlSelectedid, "INPUT"]);
    setShow([...show, true]);
  };

  const handleRemoveSpecificRow = idx => () => {
    rows.splice(idx, 1);
    setRows([...rows]);
    ddlSelectedid.splice(idx, 1);
    setDdlSelectedId([...ddlSelectedid]);
    show.splice(idx, 1);
    setShow([...show]);
  };

  React.useEffect(() => {
    console.log(rows);
  }, [rows]);

  const [ddlSelectedid, setDdlSelectedId] = React.useState(["INPUT"]);

  const handleSelect = (event, idx) => {
    event.preventDefault();
    ddlSelectedid[idx] = event.target.value;
    setDdlSelectedId([...ddlSelectedid]);
    show[idx] = false;
    setShow([...show]);
  };

  const [show, setShow] = React.useState([true]);
  const selectionContent = idx => {
    if (ddlSelectedid[idx] === "INPUT") {
      return (
        <input
          type="text"
          name="lname"
          value={rows[idx].lname}
          onChange={handleChange(idx)}
        />
      );
    } else if (ddlSelectedid[idx] === "RADIO") {
      return (
        <input
          type="radio"
          name="lname"
          value={rows[idx].lname}
          onChange={handleChange(idx)}
        />
      );
    } else if (ddlSelectedid[idx] === "CHECKBOX") {
      return (
        <input
          type="checkbox"
          name="lname"
          value={rows[idx].lname}
          onChange={handleChange(idx)}
        />
      );
    }
  };

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>INPUT FNAME</th>
            <th>Dropdown</th>
            <th>INPUT LNAME</th>
            <th>Button</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((item, idx) => (
            <tr id="addr0" key={idx}>
              <td>{idx}</td>
              <td>
                <input
                  type="text"
                  name="fname"
                  value={rows[idx].fname}
                  onChange={handleChange(idx)}
                />
              </td>
              <td>
                <select
                  name="cars"
                  id="cars"
                  onChange={e => handleSelect(e, idx)}
                >
                  <option defaultValue="INPUT">INPUT</option>
                  <option value="RADIO">RADIO</option>
                  <option value="CHECKBOX">CHECKBOX</option>
                </select>
              </td>
              <td>
                {show[idx] && (
                  <input
                    type="text"
                    name="lname"
                    value={rows[idx].lname}
                    onChange={handleChange(idx)}
                  />
                )}

                {!show[idx] && selectionContent(idx)}
              </td>
              <td>
                <button className="btn" onClick={handleRemoveSpecificRow(idx)}>
                  Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={handleAddRow} className="btn">
        Add Row
      </button>
    </div>
  );
}