更新反应材料 ui 滑块的状态/值不起作用

Posted 2023-02-22

【中文标题】更新反应材料 ui 滑块的状态/值不起作用

【英文标题】：Updating state/value of react material ui slider not working

【发布时间】：2020-12-02 02:33:38

【问题描述】：

我显示了 10 个滑块，它们从组件状态中的数据“映射”到我的 jsx 中。

我可以让所有滑块使用标题、值、输入等进行渲染，但我无法从滑块或输入更新值。

您可以从我创建的 onChange 处理程序中看到，我尝试了几种不同的方法（至少比本示例中的多 3/4），但它们都不起作用。它们都导致组件损坏。

export const PlacementsForm = () => 
  const [placementData, setPlacementData] = useState([
     key: 1, name: 'Long side panel', value: 10 ,
     key: 2, name: 'Custom wrap', value: 0 ,
     key: 3, name: 'Seatback', value: 0 ,
     key: 4, name: 'Full wrap', value: 20 ,
     key: 5, name: 'Driver’s cabin', value: 0 ,
     key: 6, name: 'Stop side panel', value: 0 ,
     key: 7, name: 'Max Parade', value: 60 ,
     key: 8, name: 'Parade', value: 0 ,
     key: 9, name: 'Full rear', value: 70 ,
     key: 10, name: 'Rear panel', value: 0 ,
  ]);

  const handleSliderChange = (event) => 
    setPlacementData(
      ...placementData,
      [event.target.name]: event.target.value,
    );
  ;

  const handleInputChange = (event, idx) => 
    const usedSlider = event.target;
    setPlacementData(() => placementData.map((item, i) => usedSlider.value));
  ;

  //   const handleInputChange = (event) => 
  //     setPlacementData(
  //       event.target.value === '' ? '' : Number(event.target.value)
  //     );
  //   ;

  //   const handleSliderChange = (name) => (event) => 
  //     // placementData[index] = event.target.value;
  //     // setPlacementData([...placementData]);
  //     setPlacementData( [name]: event.target.value );
  //   ;

  //   const handleInputChange = (name) => (event, value) => 
  //     // placementData[index].value = event.target.value;
  //     // setPlacementData([...placementData]);
  //     setPlacementData( [name]: value );
  //   ;

  console.log('placementData', placementData);

  return (
    <SliderContainer>
      <Grid>
        <Row>
          placementData.map((option) => (
            <Col xs=6 md=6 key=option.name>
              <SliderTitle>option.name</SliderTitle>
              <SliderItem key=option.key>
                <MatGrid item xs>
                  <Slider
                    value=typeof option.value === 'number' ? option.value : 0
                    onChange=handleSliderChange
                    aria-labelledby="input-slider"
                    valueLabelDisplay="auto"
                  />
                </MatGrid>
                <MatGrid item>
                  <Input
                    name=option.name
                    style= width: '50px', paddingLeft: 15 
                    value=option.value
                    margin="dense"
                    onChange=handleInputChange
                    // onBlur=handleBlur
                    inputProps=
                      step: 10,
                      min: 0,
                      max: 100,
                      type: 'number',
                      'aria-labelledby': 'input-slider',
                    
                  />
                </MatGrid>
              </SliderItem>
            </Col>
          ))
        </Row>
      </Grid>
    </SliderContainer>
  );
;

我一尝试移动滑块或使用输入，就会收到此错误。

我还能尝试什么？

【参考方案1】：

当您使用对象更新数组时，您应该使用之前在 useState 挂钩中定义的字段（“key”、“name”和“value”）。

如果这个回答有帮助，请标记它。谢谢！

【讨论】：

您能详细说明一下吗？

例如，在您的 handleSliderChange 函数中，您可以添加字段名称为 [event.target.name] 的新对象。但是您的 placementData 变量包含带有字段 "name" 的对象数组，并且新对象必须具有相同的字段名称，即 "name" 。因此，在下面您映射了您的位置数据并呼吁名为“名称”的对象字段。

我的意思是对象字段必须准确命名为“name”、“key”和“value”，没有其他方式。