React 15

Question

'de boş varsayılan değer ile nasıl kontrol edilen bir girdi oluşturulur Kontrol edilmek istediğim bir metin girişi ile ilgili bir sorun yaşıyorum, ancak boş bir değeri desteklemesi gerekiyor. (Her zaman olmasa da) '' olarak ayarlanır bu başlangıçta props.value yaygın olduğu, monte edildiğinde

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; 

: İşte benim bileşenidir. Bu, React 15'i mutsuz yapar, çünkü değer = '' değeri düşürür, bu yüzden React, bir onChange'a sahip olsa bile, kontrolsüz bir girdi olduğunu düşünür.

bileşeni çalışır, ama konsolda bu uyarıyı alıyorum sevmiyorum:

Uyarı: FormControl tipi metninin kontrollü girişini değişiyor kontrolsüz olmak. Giriş elemanları kontrolsüz olarak kontrolsüz ( ) olmamalıdır (veya tersi). Bileşenin ömrü boyunca kontrollü veya kontrolsüz giriş elemanı kullanma arasında karar verin. Daha bilgi: http://facebook.github.io/react/docs/forms.html#controlled-components

Bu, herhangi bir uyarı olmadan 0.14.x iyi çalıştı, ama şimdi 15 hoşlanmadım görünüyor. İşlevleri korumak için nasıl temizlerim, fakat uyarıdan kurtulurum?

Answer 1

this.state.value ürününün bağlayıcılığının üzerinde değil. Bunu yapıcınızda this.state = {value: props.value || ''}; ayarlayarak veya props.value gerekli bir özellik yaparak yapabilirsiniz.