Question

我在下面收到此错误。

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

我正在使用material-ui。

这是我的代码：

class RegistrationForm extends React.Component{
constructor(props) {
    super(props)
    this.state = { errorText: '', value:this.props }
  }

  phone(event) {
    var strRegExpMobile=/^\d{10}$/;
    if (event.target.value.match(strRegExpMobile)) {
      this.setState({ errorText: '',
                        phone:event.target.value
                     })
    } else {
      this.setState({ errorText: 'Invalid format' })
    }
  }
  handleSubmit(event){
    alert("submit");
    var data={
        phone:this.state.phone
    }
    console.log(data)
  }
  render() {
    return (
        <div>
          <TextField hintText="Phone"
           floatingLabelText="Phone"
           name="phone"
           value={this.state.phone}
           errorText= {this.state.errorText}
           onChange={this.phone.bind(this)}/>

          <RaisedButton label="Submit" 
           primary={true} 
           onClick={this.handleSubmit.bind(this)}/>
        </div>
    )
  }
}

任何人都可以告诉我哪里错了吗？

Answer 1

原因是，您未在phone变量中定义state，因此在初始渲染时，TextField将被视为不受控制的组件，因为value属性将具有{{1价值。

在这一行

undefined =＆gt; this.state.phone最初未定义

要在状态变量中修复此定义手机，请执行以下操作：

value = {this.state.phone}

或者使用Short-circuit evaluation来定义value属性，如下所示：

constructor(props) {
    super(props)
    this.state = { 
        errorText: '', 
        value:this.props, 
        phone: '' 
    }
}

Answer 2

因为您的值未定义，这就是您收到此错误的原因

试试这个

render() {
    return (
        <div>
          <TextField hintText="Phone"
           floatingLabelText="Phone"
           name="phone"
           value={this.state.phone || ''}
           errorText= {this.state.errorText}
           onChange={this.phone.bind(this)}/>

          <RaisedButton label="Submit" 
           primary={true} 
           onClick={this.handleSubmit.bind(this)}/>
        </div>
    )
  }

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

2 个答案: