警告：TextField中正在发生变化的文本类型的受控输入到不受控制

I M，而使用材料UI文本字段警告：TextField中正在发生变化的文本类型的受控输入到不受控制

警告得到错误：TextField中正在改变类型的文本的控制的输入是不受控制的。输入元素不应该从受控状态切换到非受控状态（反之亦然）。使用受控的或不受控制的输入元件之间决定对组件

import React, { Component, PropTypes } from 'react' 
import TextField from 'material-ui/TextField' 
import GoogleMapsLoader from 'google-maps' 
import { getUserDetail } from '../../store/actions/index' 

export default class GoogleAutoComplete extends Component { 

    constructor(props) { 
    super(props) 
    this.autocomplete = null 
    this.state = { 
     errorText: '', 
     autoCompleted: false, 
     location : '' 
    } 
    this.handlePlaceChanged = this.handlePlaceChanged.bind(this) 
    } 

    componentWillReceiveProps(nextProps) { 
    this.setState({ location: nextProps.values }) 
    //this.setState({ location: nextProps.defaultValue }) 
    } 
    componentDidMount() { 
    var state = this.state 
    setTimeout(() => { 
    var data = localStorage.getItem('selectedUser') 
    data = JSON.parse(data) 
     if(data){ 
     this.setState({location:data.profile.location}) 
     } else { 
     var local = localStorage.getItem('user')  
     local = JSON.parse(local) 
     this.setState({location:local.profile.location}) 
     }  
    },295) 

    GoogleMapsLoader.KEY = 'AIzaSyAdpJAe_X80QxbY9znGgdAQ9jLRNOlT3VY' 
    //GoogleMapsLoader.KEY = 'AIzaSyCl-pZXk8oOZWl6r7pZZacL-1hgMZYLxTo' 
    GoogleMapsLoader.LIBRARIES = ['places'] 
    GoogleMapsLoader.load((google) => { 
     this.autocomplete = new google.maps.places.Autocomplete(
     this._input.input, 
     { 
      types: ['geocode'] 
     } 
    ) 
     this.autocomplete.addListener('place_changed', this.handlePlaceChanged) 
    }) 
    } 

    componentWillUnmount() { 
    GoogleMapsLoader.release(() => { 
     console.log('No google maps api around') 
    }) 
    } 

    componentWillMount() { 
     let localdata = localStorage.getItem('step2') 
     localdata = JSON.parse(localdata) 
     if(localdata) { 
     this.setState({ location: localdata.location }) 
    } 
    this.setState({ location: JSON.parse(localStorage.getItem('user')).profile.location }) 
    } 

    handlePlaceChanged() { 
    var searchText = document.getElementById("addressSearchBoxField").value; 
    this.props.onSelectPlace(searchText); 
    this.setState({errorText: '', autocomplete: true, location:searchText}) 

    if (this.props.onPlaceChanged) { 
     this.props.onPlaceChanged(this.autocomplete.getPlace()) 
    } 
    } 

    onChangeInput(e) { 
    this.props.onChangeInput(e.target.value) 
    this.setState({ location: e.target.value }) 
    } 

    render() { 
    return (
     <TextField 
      ref={(c) => this._input = c} 
      //errorText={this.state.errorText} 
      onChange={this.onChangeInput.bind(this)} 
      name={this.props.name} 
      placeholder='Search Location' 
      style={{width:'100%'}} 
      id={this.props.id} 
      value={this.state.location} 
     /> 
    ) 
    } 
}

来源

2017-04-26 Ashish Choudhary

不受控制的文本字段不直接参考您部件的寿命，但其在组件中定义的文本字段。

阵营受控和非受控组件之间进行区分：

An <Textfield> without a value property is an uncontrolled component

来源

2017-04-26 12:20:22

对于问题的解决方案是删除值属性中TextField组件或把空值在component.Because的值属性的reactjs区分受控和不受控制的组件。仔细找到下面的代码。

render() { return ( <TextField ref={(c) => this._input = c} //errorText={this.state.errorText} onChange={this.onChangeInput.bind(this)} name={this.props.name} placeholder='Search Location' style={{width:'100%'}} id={this.props.id} value={this.state.location || ''} /> ) } }

来源

2017-04-26 12:24:47

当你的价值主张TexField元素为空或未定义此错误发生。

快速和肮脏的解决方案：

<TextField 
     ref={(c) => this._input = c} 
     // ... 
     value={this.state.location || ''} 
    />

提示： 最好是从来没有state.location为空，也没有定义，请检查您的componentWillMount方法。为了使React与您的数据保持同步，您应该保持输入受控。

来源

2017-04-26 12:43:14 gouroujo

警告：TextField中正在发生变化的文本类型的受控输入到不受控制

回答

相关问题