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

Posted 2023-02-21

【中文标题】警告：TextField 正在将文本类型的受控输入更改为不受控制

【英文标题】：Warning: TextField is changing a controlled input of type text to be uncontrolled

【发布时间】：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
        />
     )
  

【参考方案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