React Hack to rerender component with defaultValue
TIL
633
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

30 bài viết.
288 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
93 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 hơn 2 năm trước
93 18
White
64 4
Trong tuần vừa rồi, mình có đọc chương 7 cuốn sách (Link). Bài viết này nhằm mục đích giúp mình tổng hợp lại những kiến thức đã học được về chương ...
kiennt viết 6 tháng trước
64 4
White
29 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 2 năm trước
29 5
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 5 tháng trước
0 2
White
20 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 2 năm trước
20 1
White
9 0
Có một tuyên ngôn cho chủ nghĩa tối giản trong ngành phần mềm. Link: http://minifesto.org/ Fight for Pareto's law, look for the 20% of effort th...
Cẩm Huỳnh viết 2 tháng trước
9 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
30 bài viết.
288 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á!