Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

MUI Slider will not move (from UI) if value property is set

Đang mở
  • Có gì không ổn?
#987 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
28/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Trước tiên, hãy đọc TABLE.tsx và RowSlider.tsx, sau đó kiểm tra cách sử dụng MUI Slider được hiển thị ở đó, đặc biệt là việc kết nối value và trình xử lý thay đổi. Hoàn thành khi có thể di chuyển slider từ UI, slider được khởi tạo từ giá trị hàng được cung cấp, cập nhật giá trị hiển thị và gọi onChange với id của hàng cùng giá trị mới.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

I've been having trouble getting my slider to work when I use its value={...} property. For context, there is a slider for each row in a MUI Data Grid

I will layout the code accordingly so it makes sense:

TABLE.tsx
  const handleSlide = (id, newValue) => {
    const dataRows = [...backendData];
    const currentValue = dataRows.find((row) => row.id === id)!.comfortability;
    setBackendData(dataRows);

    //This will be replaced with a fetch POST request once I know its functionally sound
  }

As commented, this is where the pass back ends, here I will get the row ID and the slider's new value in order to make a query and modify a MySQL table (this latter part is irrelevant, only added in for context)

{field: 'comfortability', headerName: 'Comfortability', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell',
      renderCell: (params) => {
          return(
              <RowSlider id={params.row.id} disabled={params.row.lock} passedInValue={params.row.comfortability}  onChange={handleSlide}></RowSlider>
          );
      }
    },

This is where the function call to handleSlide is made. For context, this is one of the columns instantiated for the MUI DataGrid. (comfortability is simply a number value)

I created a custom prop called onChange which calls handleSlide. I also pass in params.row.id as id and params.row.numberValue as passedInValue into the <RowSlider> component.

RowSlider.tsx
import * as React from 'react';
import { Box, Slider } from '@mui/material';


export default function RowSlider({id, disabled, passedInValue, onChange}) {
  
  const [value, setValue] = React.useState<number>(passedInValue);

  const handleChange = (event: Event, newValue: number)  => {
    setValue(newValue);
    return(onChange(id, newValue));
  };

    return (
        <Box sx={{ width: "90%", position: 'relative', padding: "4% 10%"}}>
          <Slider value={value} disabled={disabled} onChangeCommitted={() => handleChange} step={1} marks min={1} max={5}  />
        </Box>
      );  
}

Here is where the issue occurs...

When I use the value property of the MUI Slider, it prevents me from moving the slider in the UI. However, I need this value property because:

  1. The value needs to be initially set via data from MySQL to reflect the database accurately
  2. When the slider is moved in the UI, it should (in theory)
    • Change the value state, which in turn, updates the value of the slider
    • And make a callback to onChange will the updated value and row id.

Please help me get my slider moving! I hope I did not include too much information, I know sometimes things can be finicky and I wanted to include all the relevant contextual information in case it helps.

Thank you~

Ngôn ngữ chính
TypeScript
Star
3.1k
Fork
766
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-component/slider

Tất cả issue của react-component/slider

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.