我有一个“不受控制的”React组件，其输入字段如下：

render: function(){

return (

      <input
        id="pickupField"
        tabIndex="1"
        placeholder=""
        className="order-form-input"
        onFocus={this.disableAddresses}
        onBlur={() => {
            this.enableAddresses();
            this.fieldChange('address');
        }}
        defaultValue={(order.pickup || {}).address || ''}
        ref="pickupAddress"
        hintText={(this.state.hideHintText) ? "" : "Enter the pickup address"}
        floatingLabelFixed={true}
        floatingLabelText="Pickup Address"
      />
   )
}

我遇到的问题是我想在第一次渲染后使用新数据更新此组件，并使用defaultValue而不是value意味着输入字段文本在第一次渲染后不会更新 . 例如，更新输入字段中文本的唯一方法是让用户输入，我似乎无法以编程方式更改它 .

我可以使用value而不是defaultValue来解决这个问题 . 但是，我不想使用use值而不是defaultValue的原因是因为我必须使用onChange监听器，这对我的用例来说太过分了 .

使用onChange侦听器的原因是矫枉过正，因为每次组件状态更改时我都会与数据库同步 . 我宁愿在 onblur 上同步而不是在 onchange 上同步 .

我看到了这个问题的一些解决方案，使用React字段，如“key”，但TMK这个解决方案将强制组件重新安装，这听起来对性能不利并保持逻辑简单 .

Anyone know how to solve this problem? How to update a React component's input fields programmatically, but avoiding an onchange listener?

javascript reactjs ecmascript-6