React Hack to rerender component with defaultValue
TIL
499
White

kiennt viết ngày 07/11/2016

In React, defaultValue property does not trigger rerender
So, we need a hack by create a key property, and set its value depened on defaultValue

import React, { Component, PropTypes } from 'react';

class FormChoiceInput extends Component {

  render() {
    const { label, defaultValue, options, isDisable } = this.props;
    return (
      <div className="form-group">
        <label className="control-label col-md-3">{label}</label>
        <div className="col-md-6 tabular-border">
          <select
              /*
               * XXX: Since changing `defaultValue` does not trigger React to
               * rerender, we make key of this component is depended on
               * `defaultValue`, which will make this component will be
               * re-initialize when we change `defaultValue`
               */
              key={`choiceInput-${label}-${defaultValue}`}
              ref="input"
              className="form-control"
              defaultValue={defaultValue}
              disabled={isDisable}>
            {
              options.map(option => <option key={option.label} value={option.value}>{option.label}</option>)
            }
          </select>
        </div>
      </div>
    );
  }
}

FormChoiceInput.propTypes = {
  label: PropTypes.string.isRequired,
  isDisable: PropTypes.bool.isRequired,
  options: PropTypes.arrayOf(PropTypes.object).isRequired,
  defaultValue: PropTypes.any,
}


export default FormChoiceInput;


Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

kiennt

29 bài viết.
230 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
82 18
Mọi chuyện bắt đầu từ nắm 2013 trong quá trình xây dựng chức năng login với Facebook, tôi đã tìm ra một cách để tấn công vào các hệ thống login với...
kiennt viết gần 2 năm trước
82 18
White
26 5
1. Đặt vấn đề Một trong các vấn đề của một hệ thống backend là bài toán điều phối request tới các nguồn dữ liệu. Xét bài toán với một hệ thống bl...
kiennt viết hơn 1 năm trước
26 5
White
22 4
Mở đầu Tôi đang học về (Link) (Link) (hệ thống phân tán). Đây là một lĩnh vực rất hay và khó (đối với tôi). Phần lớn các hệ thống máy tính hiện na...
kiennt viết hơn 1 năm trước
22 4
Bài viết liên quan
White
18 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
18 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 7 tháng trước
1 1
White
8 0
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết gần 2 năm trước
8 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
29 bài viết.
230 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!