javascript - React map 方法 Render Input 动态改变值分隔字段

Question

我有一个包含 100 多个数据的循环数据数组，我使用 map 方法来渲染它已经定义的用户只能更新具有 id 和唯一 id 的特定字段我现在需要能够编辑/提交它们是唯一独立的字段。所有字段都应该是一些默认值。目前，我还没有弄清楚如何区分它们 onChange 导致所有字段的状态相同。我需要每个字段分别使用其唯一数据进行更新，并且我正在使用由地图呈现的反应挂钩输入表单。这些是我想要唯一更新字段的表单。

请给出任何有助于实施的想法或建议如何解决这个问题我是新手，请帮助我们

感谢帮助

codesandoxLink：https ://codesandbox.io/s/react-week-date-view-r3mvj?file=/src/App.js

Answer 1

这是一个可行的解决方案（我编辑了您的代码框）。基本上我所做的是：

1. 初始化：roomRent_rooms

    const [roomRent, setRoomRent] = useState(rooms);
   

2. map在 roomRent 上使用：

    roomRent.map((roomData) => {
                      return (
                        <>
                          <div className={classes.Roomview}>
                            <div
                              key={roomData.id}
                              className={classes.roomavailable}
                            >
                              <input
                                name="roomRent"
                                type="text"
                                value={roomData.room}
                                className={classes.input}
                                onChange={(e) => handleroom(e, roomData.id)}
                              />
                            </div>
                            <div className={classes.roomSold}>
                              <p>{roomData.sold} Sold</p>
                            </div>
                          </div>
                        </>
                      );
                    })
   

请注意，现在handleroom有 2 个输入：e和roomData.id;

3. handleroom以这种方式更改功能：

    const handleroom = (e, id) => {
        var result = [...roomRent]; //<- copy roomRent into result
        result = result.map((x) => { //<- use map on result to find element to update using id
          if (x.id === id) x.room = e.target.value;
          return x;
        });
        setRoomRent(result); //<- update roomRent with value edited
      };
   

Answer 2

代码更改为更新循环中的特定字段。如果您想更新其他字段，您可以按照相同的方式进行操作。

将 ID 和事件传递给函数

<input
    name="roomRent"
    type="text"
    value={roomData.room}
    className={classes.input}
    onChange={(e) => handleroom(e, i)}
 />

更新特定字段值的函数

  const handleroom = (e, id) => {
    const { value } = e.target;
    setRooms((room) =>
      room?.map((list, index) =>
        index === id ? { ...list, room: value } : list
      )
    );
  };

改进的代码

export default function RoomListView() {
  const classes = useStyles();
  const [roomes, setRooms] = useState([...rooms]);

  const handleroom = (e, id) => {
    const { value } = e.target;
    setRooms((room) =>
      room?.map((list, index) =>
        index === id ? { ...list, room: value } : list
      )
    );
  };

  return (
    <>
      <div className={classes.root}>
        <Paper className={classes.paper} variant="outlined" elevation={0}>
          <div className={classes.layout}>
            <div className={classes.main1}>
              <Grid container>
                <Grid item sm={3}>
                  <div className={classes.roomType}>
                    <h4 className={classes.roomTypeContent}>Room Rate</h4>
                  </div>
                </Grid>
                <Grid item sm={9}>
                  <div className={classes.Roomcalendar}>
                    {roomes.map((roomData, i) => {
                      return (
                        <>
                          <div className={classes.Roomview}>
                            <div
                              key={roomData.id}
                              className={classes.roomavailable}
                            >
                              <input
                                name="roomRent"
                                type="text"
                                value={roomData.room}
                                className={classes.input}
                                onChange={(e) => handleroom(e, i)}
                              />
                            </div>
                            <div className={classes.roomSold}>
                              <p>{roomData.sold} Sold</p>
                            </div>
                          </div>
                        </>
                      );
                    })}
                  </div>
                </Grid>
              </Grid>
            </div>
          </div>
        </Paper>
      </div>
    </>
  );
}

实时工作代码