value和defaultValue在react.js中的区别是什么？
value和defaultValue在react.js中的区别是什么？
我正在尝试使用React创建一个简单的表单，但是在将数据正确绑定到表单的默认值时遇到了困难。
我期望的行为是：
- 当我打开页面时，文本输入字段应该填充数据库中AwayMessage的文本，即"Sample Text"
- 如果数据库中的AwayMessage没有文本，我希望在文本输入字段中显示占位符。
然而，现在，每次刷新页面时，文本输入字段都是空白的。（尽管我输入的内容能够正确保存和持久化。）我认为这是因为当AwayMessage为空对象时，输入文本字段的HTML加载，但是当awayMessage加载时，它不会刷新。而且，我无法为该字段指定默认值。
为了清晰起见，我删除了一些代码（如onToggleChange）。
window.Pages ||= {}
Pages.AwayMessages = React.createClass
getInitialState: ->
App.API.fetchAwayMessage (data) =>
@setState awayMessage:data.away_message
{awayMessage: {}}
onTextChange: (event) ->
console.log "VALUE", event.target.value
onSubmit: (e) ->
window.a = @
e.preventDefault()
awayMessage = {}
awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked
console.log "value of text", @refs["text"].getDOMNode().value
awayMessage["text"]=@refs["text"].getDOMNode().value
@awayMessage(awayMessage)
awayMessage: (awayMessage)->
console.log "I'm saving", awayMessage
App.API.saveAwayMessage awayMessage, (data) =>
if data.status == 'ok'
App.modal.closeModal()
notificationActions.notify("Away Message saved.")
@setState awayMessage:awayMessage
render: ->
console.log "AWAY_MESSAGE", this.state.awayMessage
awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else "Placeholder Text"
`
Away Messages
我的AwayMessage的console.log显示如下：
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}
React.js中value和defaultValue的区别是什么？
在React.js中，value和defaultValue是用于设置表单元素的初始值的属性。value属性用于控制受控组件的值，而defaultValue属性用于设置非受控组件的初始值。
然而，有一个问题是当使用defaultValue属性时，如果用户在输入框中输入新的值，每次按键都会导致输入框失去焦点，这对于使用onchange方法更新redux的情况来说是不理想的。
为了解决这个问题，可以将defaultValue和key设置为相同的值。这样做可以确保输入框在输入新值时不会失去焦点。以下是一个示例代码：
<input defaultValue={myVal} key={myVal}/>
这种方法是推荐的一种做法，可以在React官方文档的一篇博文中找到相关推荐：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
然而，这种解决方法并不直观，因为defaultValue属性在新的状态值为0时不会更新，仍然会采用先前的状态值。如果对此有任何建议，请告诉我。
虽然这种方法可以解决问题，但它并不直观。而且，使用相同的值作为key可能会在其他元素中重复，这似乎是不正确的做法。
因此，对于这个问题，我们可以采取将defaultValue和key属性设置为相同值的方法来解决，但需要注意defaultValue属性的一些缺陷。希望React.js能够在后续的版本中改进这个问题，使得使用起来更加直观和方便。
在React.js中，value和defaultValue是用于设置输入框的值的两个属性。value属性用于创建一个受控组件，它的值是由state或props控制的，而defaultValue属性用于创建一个非受控组件，它的值只在组件挂载时设置一次。
然而，有时候我们希望在非受控组件中更新defaultValue的值，但发现默认值并没有被更新。这个问题的原因是defaultValue属性只在组件挂载时被设置一次，后续的更新不会影响它的值。
为了解决这个问题，可以通过更改输入框的key属性来更新defaultValue的值。通过改变key的值，React会将组件视为一个全新的组件，从而重新设置defaultValue属性的值。
具体的解决方法如下：
通过将key的值与组件的状态关联起来，可以实现defaultValue值的更新。这种方法在React官方博客中也被推荐使用，因此可以认为它并不是一种hack的方法。
需要注意的是，如果你希望在输入框的每次变化都更新defaultValue的值，那么应该使用受控组件，而不是非受控组件。受控组件通过设置value属性来控制输入框的值，而非受控组件则通过defaultValue属性来设置初始值。
希望这个方法对你有帮助！
在React.js中，value和defaultValue的区别是什么？
defaultValue只用于初始加载。如果要初始化输入，则应该使用defaultValue，但如果要使用状态来更改值，则需要使用value。个人而言，如果只是进行初始化，我喜欢只使用defaultValue，然后在提交时使用refs来获取值。在React文档中有更多关于refs和inputs的信息。
getInitialState不能进行API调用。对于你的情况，我建议在componentDidMount中进行API调用。可以参考React文档中的示例和关于组件生命周期的资料。
我个人不喜欢在render中进行if else逻辑，而是喜欢在state中使用“loading”属性，在表单加载之前渲染一个加载动画。这是一个重写示例。如果代码中的cjsx引用有误，可能是因为我通常直接使用类似这样的Coffeescript。
这基本上涵盖了这个问题。这是一种使用状态和值进行表单处理的方法。你也可以使用defaultValue代替value，并在提交时使用refs来获取值。如果选择这种方式，我建议创建一个外层组件（通常称为高阶组件）来获取数据并将其作为props传递给表单。
我建议彻底阅读React文档并完成一些教程。有很多博客和教程可供参考。我自己的网站上也有一些内容。
只是好奇为什么在getInitialState中不适合进行API调用？getInitialState在componentDidMount之前执行，而API调用是异步的。这是常规做法还是有其他原因？
我不知道具体在哪里看到的，但我知道你不应该在其中放置API调用。有一个库专门用于处理这个问题，但我不建议使用该库，而是将API调用放在componentDidMount中。我知道React文档中的教程也是在componentDidMount中进行API调用的。
因为API调用是异步的，而getInitialState会同步返回状态。因此，在API调用完成之前，初始状态已经设置好了。
用value替换defaultValue是否安全？我知道defaultValue只在初始化时加载，但value似乎也是如此。
可以使用value，但现在必须设置输入的值才能起作用。defaultValue只设置初始值，而输入框可以更改该值。但使用value后，输入框就成为了“受控”状态。