React复用同一含InputBase的组件时如何分别获取两处输入值

解决方法 #

1. 调整复用组件定义 #

新增状态更新回调入参，同时将组件改为标准React组件规范（首字母大写），代码如下：

const StationSelection = ({ stationName, onStationChange }) => {
   return (
      <Paper
         component="form"
         elevation={5}
         sx={{
            m: '10px 0 30px 5px',
            p: '2px 4px',
            display: 'flex',
            alignItems: 'center',
            width: 300,
         }}
      >
      <InputBase
         sx={{ ml: 1, flex: 1 }}
         placeholder="Please select a station."
         value={stationName}
         onChange={(e) => onStationChange(e.target.value)}
      />
      <Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
      <IconButton
         color="primary"
         sx={{ p: '10px' }}
         aria-label="directions"
      >
         <ArrowDropDownCircleOutlinedIcon />
      </IconButton>
    </Paper>
   )
}

2. 调整组件调用逻辑 #

给两个不同场景的组件实例，分别传入对应的状态值和状态更新函数：

<CardContent className="default-font">
   <Box sx={{ mb: 10 }}>
      <Box className="bold">DEPARTURE STATION</Box>
      <StationSelection 
        stationName={departStation} 
        onStationChange={setDepartStation}
      />

      <Box className="center">
         <Box className="bold" sx={{ flexGrow: 1 }}>
            ARRIVAL STATION
         </Box>
         <IconButton
            color="primary"
            sx={{ p: '5px', m: '-10px 0 -10px 0' }}
         >
            <ImportExportIcon />
         </IconButton>
      </Box>
      <StationSelection 
        stationName={arriveStation} 
        onStationChange={setArriveStation}
      />
   </Box>

   {ticketDetails()}
</CardContent>

逻辑说明 #

• 复用的输入组件不维护内部状态，所有状态保存在父组件，通过props将当前输入值、更新方法透传给子组件
• 两个输入实例分别绑定独立的状态更新函数，输入变更时会分别修改父组件的departStation和arriveStation状态，互不干扰
• 改用标准React组件调用形式替代直接函数调用，符合React渲染规则，避免异常重渲染问题

内容的提问来源于stack exchange，提问作者Kingsley Yong