React Suite Accepter 组件在更改时不更新表单值答案

【问题标题】：React Suite Accepter Component Not Updating Form Value On ChangeReact Suite Accepter 组件在更改时不更新表单值
【发布时间】：2020-12-19 18:27:46
【问题描述】：

我将rsuitejs 用于组件，并且在我正在创建的表单中，我有一个名为 MotivationSlider 的自定义滑块，它不会在值更改时更新其所在表单中的数据.自定义 Slider 如下所示：

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;

它被包裹在一个自定义字段中，如下所示：

// 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"
/>

当我改变滑块值时，表单数据不会改变，但是如果我像这样使用带有普通 Slider 的 CustomField，表单值会改变。

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

我在这里做错了什么？

【问题讨论】：

标签： reactjs react-component react-context rsuite

【解决方案1】：

表单自定义控件需要实现onChange、value、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;

【讨论】：