另一种解决方法是更改输入的key。

<input ref="text" key={this.state.awayMessage ? 'notLoadedYet' : 'loaded'} onChange={this.onTextChange} defaultValue={awayMessageText} />

更新：由于这得到了upvotes，我不得不说，你应该适当地有一个disabled或readonly prop ，而内容正在加载，所以你不会降低用户体验。
是的，它很可能是一个黑客，但它完成了工作。-）

defaultValue仅适用于初始加载

如果你想初始化输入，那么你应该使用defaultValue，但是如果你想使用state来改变值，那么你需要使用value。就我个人而言，如果我只是初始化它，我喜欢只使用defaultValue，然后在我提交时只使用refs来获得值。在react文档https://facebook.github.io/react/docs/forms.html和https://facebook.github.io/react/docs/working-with-the-browser.html上有更多关于refs和input的信息。
下面是我将如何重写您的输入：

awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else ''
<input ref="text" onChange={this.onTextChange} placeholder="Placeholder Text" value={@state.awayMessageText} />

另外，你也不想像以前那样传递占位符文本，因为那样实际上会将值设置为'placeholder text'。你仍然需要传递一个空值到输入中，因为undefined和nil会将值转换为defaultValue，本质上是. https://facebook.github.io/react/tips/controlled-input-null-value.html。

getInitialState无法进行API调用

你需要在getInitialState运行后调用API。对于你的情况，我会在componentDidMount中调用它。下面是https://facebook.github.io/react/tips/initial-ajax.html的例子。
我还建议阅读react.https://facebook.github.io/react/docs/component-specs.html中的组件生命周期。

用修改和加载状态重写

就我个人而言，我不喜欢在渲染中使用if else then逻辑，而更喜欢在我的状态中使用“loading”，在表单加载之前渲染一个字体很棒的微调器http://fortawesome.github.io/Font-Awesome/examples/。这里重写一遍来告诉你我的意思。如果我搞砸了cjsx的滴答声，那是因为我通常只是像这样使用coffeescript。

window.Pages ||= {}

Pages.AwayMessages = React.createClass

  getInitialState: ->
    { loading: true, awayMessage: {} }

  componentDidMount: ->
    App.API.fetchAwayMessage (data) =>
      @setState awayMessage:data.away_message, loading: false

  onToggleCheckbox: (event)->
    @state.awayMessage.master_toggle = event.target.checked
    @setState(awayMessage: @state.awayMessage)

  onTextChange: (event) ->
    @state.awayMessage.text = event.target.value
    @setState(awayMessage: @state.awayMessage)

  onSubmit: (e) ->
    # Not sure what this is for. I'd be careful using globals like this
    window.a = @
    @submitAwayMessage(@state.awayMessage)

  submitAwayMessage: (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: ->
    if this.state.loading
      `<i className="fa fa-spinner fa-spin"></i>`
    else
    `<div className="away-messages">
       <div className="header">
         <h4>Away Messages</h4>
       </div>
       <div className="content">
         <div className="input-group">
           <label for="master_toggle">On?</label>
           <input type="checkbox" onChange={this.onToggleCheckbox} checked={this.state.awayMessage.master_toggle} />
         </div>
         <div className="input-group">
           <label for="text">Text</label>
           <input ref="text" onChange={this.onTextChange} value={this.state.awayMessage.text} />
         </div>
       </div>
       <div className="footer">
         <button className="button2" onClick={this.close}>Close</button>
         <button className="button1" onClick={this.onSubmit}>Save</button>
       </div>
     </div>

这应该涵盖了它。现在，这是一种使用状态和值的表单的方法。你也可以使用defaultValue代替value，然后在提交时使用refs来获取值。如果你走这条路，我建议你使用一个 shell 组件（通常称为高阶组件）来获取数据，然后将其作为 prop 传递给表单。
总的来说，我建议大家阅读react文档，做一些教程。有很多博客在那里，http://www.egghead.io有一些很好的教程。我的网站上也有一些东西，http://www.openmindedinnovations.com。

这非常简单，使defaultValue和key相同：

<input defaultValue={myVal} key={myVal}/>

这是www.example.com上推荐的方法之一https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key

也许这不是最好的解决方案，但是我会做一个像下面这样的组件，这样我就可以在代码的任何地方重用它。

<MagicInput type="text" binding={[this, 'awayMessage.text']} />

该组件可能如下所示：

window.MagicInput = React.createClass

  onChange: (e) ->
    state = @props.binding[0].state
    changeByArray state, @path(), e.target.value
    @props.binding[0].setState state

  path: ->
    @props.binding[1].split('.')
  getValue: ->
    value = @props.binding[0].state
    path = @path()
    i = 0
    while i < path.length
      value = value[path[i]]
      i++
    value

  render: ->
    type = if @props.type then @props.type else 'input'
    parent_state = @props.binding[0]
    `<input
      type={type}
      onChange={this.onChange}
      value={this.getValue()}
    />`

其中，change by array是一个通过数组表示的路径访问散列的函数

changeByArray = (hash, array, newValue, idx) ->
  idx = if _.isUndefined(idx) then 0 else idx
  if idx == array.length - 1
    hash[array[idx]] = newValue
  else
    changeByArray hash[array[idx]], array, newValue, ++idx

要强制defaultValue重新呈现，您需要做的就是更改输入本身的键值。

<input 
type="text" 
key={myDynamicKey} 
defaultValue={myDynamicDefaultValue} 
placeholder="It works"/>

相关问题
在控件上设置defaulValue不会更新state。
执行反向操作非常有效：

• 将state设置为默认值，控件UI会正确更新，就像给定了defaulValue一样。

代码：

let defaultRole = "Owner";

const [role, setRole] = useState(defaultRole);

useEffect(() => {
    setMsg(role);
});

const handleChange = (event) => {
    setRole(event.target.value );
};

// ----

<TextField
    label="Enter Role"
    onChange={handleChange}
    autoFocus
    value={role}
/>

1.定义默认值的状态
1.使用div和key属性包围输入
1.将键值设置为与输入的defaultValue相同的值。
1.调用在步骤1中定义的setDefaultValue以重新呈现组件

• • 示例：**

const [defaultValue, setDefaultValue] = useState(initialValue);

useEffect(() => {
    setDefaultValue(initialValue);
}, false)

return (
    <div key={defaultValue}>
        <input defaultValue={defaultValue} />
    </div>
)

为参数“placeHolder”赋值。例如：-

<input 
    type="text"
    placeHolder="Search product name."
    style={{border:'1px solid #c5c5c5', padding:font*0.005,cursor:'text'}}
    value={this.state.productSearchText}
    onChange={this.handleChangeProductSearchText}
    />

使用value代替defaultValue，并使用onChange方法更改输入值。