警告：TextField正在将text类型的受控输入更改为不受控

Question

使用Materialui textfield时出错

警告：TextField正在将text类型的受控输入更改为不受控。输入元素不应从受控切换到非受控（或反之亦然）。决定在组件的生存期内使用受控还是不受控输入元素

export default class GoogleAutoComplete extends Component {
  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}
        />
     )
  }
}

Answer 1

解决该问题的方法是删除textfield组件中的value属性或在组件的value属性中放置null值。因为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 || ''}
        />
     )
  }
}