React map 方法 Render Input 动态更改值单独的字段

Question

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

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

感谢帮助

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

Answer 1

Here 一个可行的解决方案（我编辑了你的 codesandbox）。基本上我所做的是：

用rooms初始化roomRent:

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

使用 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；

以这种方式更改了 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>
    </>
  );
}

Live working code

React map 方法 Render Input 动态更改值单独的字段

React map method Render Input dynamically change value separate fields

javascript

reactjs

react-hooks

react-forms