Question

我正在尝试将redux表单与材质ui滑块集成在一起-但它没有把握住-尚不清楚滑块是否需要默认值，或者我是否正在将输入参数复杂化。

https://codesandbox.io/s/jn1ok?file=/demo.js-这是它的沙箱

但是我需要在此滑块组件内部添加handleChange，然后才能从子级反弹。

import React from "react";
import Slider from "@material-ui/core/Slider";

/*
  const [value, setValue] = React.useState(30);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

*/

const ContinuousSlider = (value, handleChange) => (
  <Slider
    value={value}
    //onChange={handleChange}
    aria-labelledby="continuous-slider"
  />
);

export default ContinuousSlider;

这是原始沙箱-

https://material-ui.com/components/slider/

集成应该很简单。价值，不变-

<Slider value={value} onChange={handleChange} aria-labelledby="continuous-slider" />

我已经看过了-但是没有运气。 Material UI Slider won't slide

我已经创建了这样的组件。

import React from 'react';
import Slider from '@material-ui/core/Slider';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import FormHelperText from '@material-ui/core/FormHelperText';

const renderSlider = ({input, label, type, value, onChange, meta: { touched, error, warning } }) => (
  <FormControl component="fieldset" fullWidth={true}>
    <FormLabel component="legend">{label}</FormLabel>
    <Slider 
        defaultValue={0}
        aria-labelledby="continuous-slider" 
        {...input}
    />
    <FormHelperText 
        error={error && error.length > 0 ? true : false}
    >
        {error}
    </FormHelperText>
  </FormControl>
)

export default renderSlider;

redux表单组件调用是这样的

                      <Field 
                          key={j} 
                          name={item.name[0]} 
                          label={item.label} 
                          component={<renderSlider />}
                  type={(item.type === "radio" || item.type === "date" || item.type === "slider")? null :  item.type}
                          options={item.options}
                          rows={item.type === "comment" ? 4 : null}
                          multiline={item.type === "comment" ? true : false}
                  onChange={this.onChange}
                      />

喂饱这样的物体

{
  "type": "slider",
  "label": "Ranger",
  "name": ["ranger"],
  "options": [],
  "validate": ["required"],
}

滑块-材质ui和redux表单-一起工作

0 个答案: