Reactjs React设计模式困境-数字形式组件中的步进器

所以我们都知道不受控制的组件通常是一件坏事，这就是为什么我们通常希望在更高级别的组件（通常是某种容器）上管理输入（或输入组）的状态。例如，

组件管理状态，并将状态作为值传递给其

组件。它还传递允许输入更新状态的函数，如

handleChange（）

但是，在实现我自己的

组件时，它让我想到，从根本上说，这个组件不是自力更生的。它是可重用的，但需要大量重复（与枯燥心态相反），因为在我的应用程序中，我想使用这个组件的任何地方，我都必须实现这些状态值，一个handleChange函数，在我的

中，还有两个额外的函数来控制步进箭头

如果我（或接管我的代码的人）想要使用这个

，但他们忘记运行到另一个容器组件，并复制

steppup（）

和

steppdown（）

函数作为道具向下传递，那么只会有两个非功能箭头。我知道这个模型允许我们的组件具有灵活性，但它们似乎更容易出错，并且依赖于其他地方的其他组件。同样，它也是重复的。我的想法是否有误，或者是否有更好的管理方法

我认识到这更多的是一个理论/设计问题，但我将我的代码包括在下面以供参考：

数字输入：

const NumericInput = ({label, stepUp, stepDown, ...props}) => (
  <>
    {label && <Label>{label}</Label>}
    <InputContainer>
      <Input type={props.type || "number"} {...props} />
      <StepUp onClick={stepUp}>
        //icon will go here
      </StepUp>
      <StepDown onClick={stepDown}>
        //icon will go here
      </StepDown>
    </InputContainer>
  </>
);

const NumericInput=（{label，steppup，steppdown，…props}）=>(
{label&&{label}
//图标将显示在这里
//图标将显示在这里
);

Form.js

const Form = (props) => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  }

  const stepUp = () => {
    setValue(value++);
  }

  const stepDown = () => {
    setValue(value--);
  }

  return (
    <NumericInput 
      stepUp={stepUp}
      stepDown={stepDown}
      handleChange={handleChange}
      label="Numeric"
    )
 }

const Form=（道具）=>{
const[value，setValue]=使用状态（“”）；
常数handleChange=（e）=>{
设定值（即目标值）；
}
常数递增=（）=>{
设置值（值++）；
}
常数递减=（）=>{
设置值（值--）；
}
返回(
将setValue函数移到NumericiInput组件
通过组件管理您的状态

return (
  <NumericInput 
    setValue={setValue}
    label="Numeric"
  />
)

返回(
)

我建议你使用hooks
让我们试着把你的问题简化一点：

[NumericiInput]是可重复使用的，但需要大量重复（与DRY心态相反），因为在我的应用程序中，我想使用该组件的任何地方，我都必须实现这些状态值、handleChange函数，在我的情况下，还有两个附加函数来控制步进箭头

唯一需要重复的是为
定义一个和一个回调属性。value prop包含数值输入值，并从拥有该状态的父容器组件传入。您需要回调来触发子容器（受控组件）的更改请求.这是通常的方法，当您需要将您的组件划分为

steppup
/
steppdown
方法是
数值输入
的一个实现细节，因此您可以从
表单
表单

中删除它们，只想知道是否触发了值更改，以及新更改的数值是什么

关于将状态存储在何处：可能有一个原因，即您希望将状态保存在

表单
组件中的原因。用户在中输入一些输入（可能）在按下提交按钮之前有多个字段。此时，表单需要其子字段的所有状态来触发基于给定输入的进一步处理。惯用的反应方式是将状态提升到表单以获得信息

我知道这个模型允许我们的组件具有灵活性，但它们似乎更容易出错，并且依赖于其他地方的其他组件。同样，它也是重复的

表示组件不太容易出错，而且是独立的，因为它不关心状态！当然，您可以通过在child中公开回调和值道具来编写更多的样板代码。最大的优点是，它使无状态组件更易于预测和测试，并且您可以将注意力转移到复杂组件上s与状态，例如调试时

为了简化从
表单
传递到多个子组件的道具，您也可以。下面是一个简单的示例，说明如何处理组件：

NumericiInput.js：

const NumericInput = ({ label, value, onValueChanged }) => {
  const handleStepUp = () => {
    onValueChanged(value + 1);
  };

  const handleStepDown = () => {
    onValueChanged(value - 1);
  };

  return (
    <>
      ...
      <Input value={this.state.value} />
      <StepUp onClick={handleStepUp}></StepUp>
      <StepDown onClick={handleStepDown}></StepDown>
    </>
  );
};

const NumericInput=（{label，value，onValueChanged}）=>{
常量handlestepp=（）=>{
onValueChanged（值+1）；
};
常量handleStepDown=（）=>{
onValueChanged（值-1）；
};
返回(
...
);
};

Form.js：

const Form = (props) => {
  const [value, setValue] = useState(0);

  const handleValueChanged = (value) => {
    setValue(value);
  }

  return (
    <NumericInput 
      onValueChanged={handleValueChanged}
      value={value}
      label="Numeric"
    )
 }

const Form=（道具）=>{
const[value，setValue]=useState（0）；
常量handleValueChanged=（值）=>{
设置值（值）；
}
返回(
我相信
step-up
和
step-down
是
NumericInput
组件的责任。但是他们应该用相关的更新值触发
onChange
。那么，我在
NumericInput
中设置的函数和
NumericInput
中更改该输入值的组件会是什么呢我问的主要原因是我知道在纯JS中，你会使用
document.getElementById（“Input”）.stepp（）；
，但这不是做事情的反应方式，所以我不太确定如何访问这个stepp函数。