如何设置输入组件的默认值?

ReactJS: How do I set the default value for input components?

本文关键字：组件默认值输入何设置设置更新时间：2023-09-26

在使用输入字段的默认值时，如何绕过带有props状态的反模式?

呈现表单时，它应该包含一些默认值。当我设置一些值并关闭表单然后重新打开表单时，我希望显示默认值，而不是先前输入的值…

但是当我让state继承props的值时，props将永远改变。我还没有找到一个方法来绕过这个

如果您查看默认的input组件，或者来自react-bootstrap的输入，或者大多数DatePickers和Selects在互联网上，您将看到它们中的大多数都有一个value prop，并且它们中的大多数将很少或无状态，至少当涉及到所选值时。

一个input意味着uncontrolled，这意味着他们最好没有状态，只是接收作为道具的值，以及当值改变时他们应该调用的回调。这取决于他们上面的controller-view，观察这些事件并改变模型。有时候，输入也可以方便地将值保持在状态中，但它们只能在尊重作为prop传递的新值时才能这样做，因为状态在呈现器中持续存在，getInitialState只被调用一次。参见:ReactJS:为什么将组件初始状态传递为prop是反模式?

然而，因为controller-view处理所有这些值变化太麻烦了，React提供了一个名为ReactLink的实用程序，简单地说，它是一种自动将input绑定到controller-view状态下的属性的方法。示例:您可以将input绑定到模型的属性DateOfBirth，这是controller-view状态的一部分。

现在回到你的问题，你实际上不传递默认值，你传递值本身，作为一个prop。controller-view应该决定它是什么。DateOfBirth字段的值是多少?没有一个吗?好的，我将传递默认值为value prop