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

Posted 2023-02-18

【中文标题】React map 方法 Render Input 动态改变值分隔字段

【英文标题】：React map method Render Input dynamically change value separate fields

【发布时间】：2021-09-16 05:49:45

【问题描述】：

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

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

感谢您的帮助

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

【参考方案1】：

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

用rooms初始化roomRent：

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

在 roomRent 上使用 map：

 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
   ;

【讨论】：

谢谢你的回答，我已经学会了并尝试实施它

【参考方案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