reactjsreact-componentreact-contextrsuite

React Suite Accepter Component Not Updating Form Value On Change


I am using rsuitejs for components, and in a form I am creating I have a custom slider called MotivationSlider which isn't updating the data in the form it's in when the value is changed. The custom Slider looks like this:

import React, { useState } from 'react';
import { Slider } from 'rsuite';

const MotivationSlider = () => {
  const [motivation, setMotivation] = useState(2);

  return (
    <Slider
      min={0}
      max={4}
      value={motivation}
      graduated
      progress
      className="custom-slider"
      onChange={v => setMotivation(v)}
      renderMark={mark => {
        if ([0, 4].includes(mark)) {
          return <span>{mark === 0 ? 'Not Very' : 'Highly!'}</span>;
        }
        return null;
      }}
    />
  );
};

export default MotivationSlider;

It is wrapped in a Custom Field which looks like this:

// CustomField.js:
import React from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'rsuite';

const CustomField = ({ name, message, label, accepter, error, ...props }) => {
  return (
    <FormGroup className={error ? 'has-error' : ''}>
      <ControlLabel>{label} </ControlLabel>
      <FormControl
        name={name}
        accepter={accepter}
        errorMessage={error}
        {...props}
      />
      <HelpBlock>{message}</HelpBlock>
    </FormGroup>
  );
};

export default CustomField;

// FormPage.js:
<CustomField
  accepter={MotivationSlider}
  name="motivation"
/>

When I change the slider value, the form data does not change, however if I use the CustomField with a normal Slider like this, the form value does change.

<CustomField 
  accepter={Slider} 
  name="motivation" 
  min={0} 
  max={4} 
/>

What am I doing wrong here?


Solution

  • Form custom controls need to implement the attributes onChange, value, and defaultValue.

    import React, { useState } from "react";
    import { Slider } from "rsuite";
    
    const MotivationSlider = React.forwardRef((props, ref) => {
      const { value: valueProp, defalutValue, onChange } = props;
      const [motivation, setMotivation] = useState(defalutValue);
      const value = typeof valueProp !== "undefined" ? valueProp : motivation;
    
      return (
        <Slider
          ref={ref}
          min={0}
          max={4}
          value={value}
          graduated
          progress
          className="custom-slider"
          onChange={(v) => {
            onChange(v);
            setMotivation(v);
          }}
          renderMark={(mark) => {
            if ([0, 4].includes(mark)) {
              return <span>{mark === 0 ? "Not Very" : "Highly!"}</span>;
            }
            return null;
          }}
        />
      );
    });
    
    export default MotivationSlider;