Question

使用material ui textfield

时出错

警告： 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}
        />
     )
  }
}

Answer 1

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

Answer 2

不受控制的文本字段不直接引用您的组件，而是引用组件中定义的文本字段。

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

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

Answer 3

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

快速而肮脏的解决方案：

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

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

Answer 4

在定义state.location之前，您要将undefined传递到文本字段的值prop。根据定义，不具有value属性的TextField被视为不受控制。这可能是在第一次通过render函数时发生的。

您可以通过这样设置值来解决此问题：value={this.props.value?this.props.value:""}这将确保您的TextField组件始终受到控制，而在第一次渲染过程中仍为“空”。

警告：TextField正在更改类型为text的受控输入，使其不受控制

4 个答案: