警告：TextField 正在将文本类型的受控输入更改为不受控制答案

【问题标题】：Warning: TextField is changing a controlled input of type text to be uncontrolled警告：TextField 正在将文本类型的受控输入更改为不受控制
【发布时间】：2017-09-23 19:53:05
【问题描述】：

使用material ui 文本字段时出错

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

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}
        />
     )
  }
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在定义 state.location 之前，您将 undefined 传递给文本字段的 value 属性。根据定义，没有 value 属性的 TextField 被认为是不受控制的。这可能发生在“第一次”通过渲染函数时。

你可以通过设置你的值来解决这个问题：value={this.props.value?this.props.value:""} 这将确保你的 TextField 组件在整个时间都受到控制，同时在第一次渲染时它仍然是“空的”。

【讨论】：

【解决方案2】：

解决办法是去掉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 || ''}
        />
     )
  }
}

【讨论】：

【解决方案3】：

当您的 TexField 元素的 value 属性为 null 或未定义时，会发生此错误。

快速而肮脏的解决方案：

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

提示： 最好不要将 state.location 设置为 null 或 undefined，检查您的 componentWillMount 方法。为了让 React 与你的数据保持同步，你应该控制你的输入。

【讨论】：

【解决方案4】：

不受控制的 Textfield 不直接引用您的组件，而是引用您组件中定义的 Textfield。

React 区分受控组件和不受控组件：

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

【讨论】：