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

Question

我在下面收到这个错误。

Warning: TextField is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我正在使用 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

原因是，您没有在 state 变量中定义 phone，因此在初始呈现时，TextField 将被视为 不受控制的组件，因为值属性将具有 undefined 值。

这一行

value = {this.state.phone} => this.state.phone 最初未定义

要修复此问题，请在状态变量中定义 phone，如下所示：

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

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

value = {this.state.phone || ''}      //(undefined || '') = ''

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 正在将不受控制的文本类型输入更改为受控制

ReactJS Warning: TextField is changing an uncontrolled input of type text to be controlled

reactjs

material-ui