Cách tạo đầu vào được điều khiển với mặc định trống trong React 15

Question

Tôi gặp sự cố với kiểu nhập văn bản mà tôi muốn được kiểm soát, nhưng nó cần hỗ trợ giá trị trống. Đây là thành phần của tôi:

import React, { Component, PropTypes } from 'react'; 
import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap'; 

const propTypes = { 
    id: PropTypes.string.isRequired, 
    label: PropTypes.string, 
    onChange: PropTypes.func, 
    upperCaseOnly: PropTypes.bool, 
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 
}; 

export default class UppercaseTextField extends Component { 
    constructor(props) { 
    super(); 
    this.state = { value: props.value }; 
    this.onChange =() => this.onChange(); 
    } 

    onChange(e) { 
    let value = e.target.value; 
    if (this.props.upperCaseOnly) { 
     value = value.toUpperCase(); 
    } 
    this.setState({ value }); 
    this.props.onChange(e); 
    } 

    render() { 
    return (
     <FormGroup controlId={id}> 
     <ControlLabel>{this.props.label}</ControlLabel> 
     <FormControl 
      type="text" 
      onChange={this.onChange} 
      defaultValue={this.props.value} 
      value={this.state.value} 
     /> 
     </FormGroup> 
    ); 
    } 
} 

UppercaseTextField.propTypes = propTypes; 

Khi điều này được đặt ban đầu, props.value thường (mặc dù không phải lúc nào) được đặt thành ''. Điều này làm cho React 15 không hài lòng, vì value = '' làm cho giá trị bị giảm xuống, vì vậy React nghĩ rằng đó là một đầu vào không kiểm soát được, mặc dù nó có một onChange.

Các thành phần hoạt động, nhưng tôi không thích nhận được cảnh báo này trong giao diện điều khiển:

Cảnh báo: FormControl đang thay đổi một đầu vào điều khiển của loại văn bản được không kiểm soát được. Các yếu tố đầu vào không được chuyển từ kiểm soát sang không được kiểm soát (hoặc ngược lại). Quyết định sử dụng yếu tố đầu vào không được kiểm soát hoặc không kiểm soát được trong suốt thời gian của thành phần. Hơn thông tin: http://facebook.github.io/react/docs/forms.html#controlled-components

này làm việc tốt trong 0.14.x mà không cần bất kỳ cảnh báo, nhưng bây giờ 15 dường như không thích nó. Làm thế nào để tôi làm sạch nó để giữ chức năng nhưng thoát khỏi cảnh báo?

Answer 1

đảm bảo this.state.value không được xác định trên giá treo. Bạn có thể làm điều này trong nhà xây dựng của bạn bằng cách thiết lập this.state = {value: props.value || ''}; hoặc bằng cách làm cho props.value một thuộc tính bắt buộc.