Question

我有一个“不受控制的”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这个解决方案将强制组件重新安装，这听起来对性能不利并且保持逻辑简单。

任何人都知道如何解决这个问题？如何以编程方式更新React组件的输入字段，但避免使用onchange监听器？

反应不受控制的组件 - 尽管存在defaultValue

0 个答案: