ReactJS：如何设置输入组件的默认值？

Question

当使用输入字段的默认值时，如何使用props中的状态绕过反模式？

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

但是当我让state从props继承值时，道具会永远改变。我还没有办法解决这个问题。

Answer 1

如果您查看默认的input组件，或react-bootstrap的输入，或互联网上的大多数DatePickers和Selects，您会看到最多他们有一个value道具，其中大多数都没有任何状态，至少在选定值时。

input意味着uncontrolled，这意味着他们最好没有状态，只是接收值作为道具，以及当值改变时应该调用的回调。它取决于它们之上的controller-view，观看这些事件并更改模型。有时候输入也可以方便地将值保持在状态中，但是只要它们尊重将新值作为prop传递，它们只能这样做，因为状态持续存在rerenders和getInitialState只被调用一次。另见：ReactJS: Why is passing the component initial state a prop an anti-pattern?

但是，因为controller-view处理所有这些值更改会过于繁琐，所以React附带了一个名为ReactLink的实用程序，它非常简单地是一种自动绑定{的方法。 {1}}到input状态的属性。示例：您可以将controller-view绑定到模型的属性input，该属性是DateOfBirth的状态的一部分。

现在回到你的问题，你实际上没有传递默认值，你传递值本身，作为道具。 controller-view应该决定它是什么。 controller-view字段的值是多少？没有？好的，我会将默认值作为DateOfBirth道具传递。