Remix结合MUI Slider无法触发ActionFunction的问题求助

你的代码存在几个关键问题导致ActionFunction未被正确触发：

• MUI Slider本身不是标准表单控件，无法直接作为表单字段提交，Form中没有携带可被识别的表单数据。
• useSubmit的调用方式错误，传递的参数不符合Remix的要求，无法正确触发Action。
• 重复绑定了提交逻辑（Form的onChange和Slider的onChange），导致提交行为混乱。

修正步骤及代码示例 #

1. 修改DiscreteSlider组件

添加隐藏表单字段存储滑块值，用状态管理滑块数值，并正确调用useSubmit：

import { useState } from 'react';
import { useSubmit, Form } from '@remix-run/react';
import { Box, Slider } from '@mui/material';

export default function DiscreteSlider(props: { teamValue: number; name: string }) {
  const submit = useSubmit();
  // 用状态管理滑块当前值
  const [value, setValue] = useState(props.teamValue);

  const handleSliderChange = (event: Event, newValue: number) => {
    setValue(newValue);
    // 提交表单，确保传递Form元素
    submit(event.currentTarget.form);
  };

  return (
    <Form method="post">
      {/* 隐藏input，用于携带滑块值到FormData */}
      <input
        type="hidden"
        name={props.name}
        value={value}
      />
      <Box sx={{ width: "100%" }}>
        <Slider
          aria-label="Team Setup Value"
          value={value}
          step={10}
          min={10}
          max={30}
          marks={marks} // 确保marks已定义
          onChange={handleSliderChange}
        />
      </Box>
    </Form>
  );
}

2. 调整路由组件（AdminOrganizationSettingsGeneral）

移除未被使用的setChanges函数，简化代码：

import { useActionData } from '@remix-run/react';
import { PaperCustom, Grid, Typography } from '@mui/material';
import DiscreteSlider from './DiscreteSlider';

export default function AdminOrganizationSettingsGeneral() {
  const actionData = useActionData<typeof action>();

  return (
    <PaperCustom sx={{ width: "100%" }}>
      {teams.map((val, index) => (
        <Grid container key={val._id} sx={{ padding: "1rem" }}>
          <Grid item md={2} xs={3}>
            <Typography>{val.status}</Typography>
          </Grid>
          <Grid item md={3} xs={6}>
            <Typography>{val.name}</Typography>
          </Grid>
          <Grid item md={3} xs={3}>
            <Typography>Team: {val.members}</Typography>
          </Grid>
          <Grid item md={4} xs={12}>
            <DiscreteSlider
              teamValue={val.setup ?? 10}
              name={val._id}
            />
          </Grid>
        </Grid>
      ))}
    </PaperCustom>
  );
}

3. 完善ActionFunction

现在可以从FormData中获取滑块值，进行数据库更新：

import { ActionFunction, ActionArgs } from '@remix-run/node';

export const action: ActionFunction = async (args: ActionArgs) => {
  const { request, params } = args;
  const { orgId = "" } = params;
  const form = await request.formData();

  // 获取所有提交的滑块值（每个团队对应一个字段，key是teamId）
  for (const [teamId, value] of form.entries()) {
    console.log(`更新团队 ${teamId} 的值为: ${value}`);
    // 这里执行数据库更新逻辑，比如：
    // await updateTeamSetup(orgId, teamId, Number(value));
  }

  // 返回数据供前端使用（可选）
  return { success: true };
};

关键修改说明 #

• 隐藏input字段：让Form能携带滑块的数值，Remix的Action才能通过FormData获取到数据。
• 状态管理滑块值：确保滑块显示的数值和提交的数值一致。
• 正确调用submit：传递Form元素作为参数，让Remix正确处理表单提交，触发ActionFunction。
• 移除冗余逻辑：删除未使用的setChanges和重复的提交绑定，避免行为冲突。

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