如何在Material UI中使TextField失效

Question

我正在使用TextField组件来获取电话号码。当用户输入时，如果它不是数字或者不符合一定格式，我想使其无效并显示错误信息。目前，在没有触摸到该字段的情况下就会显示错误信息。我该如何实现这个行为呢？

非常感谢任何帮助。

- Mo3z

Answer 1

从版本0.20.1开始，您可以使用helperText和error属性。

<TextField 
    hintText="Phone"
    error ={this.state.errorText.length === 0 ? false : true }
    floatingLabelText="Phone"
    name="phone"
    helperText={this.state.errorText}
    onChange={this.onChange.bind(this)}/>

- Sam

---

谢谢！这对我有用，但我稍微改了一下，使用了 error={!!this.state.errorText}。 - Daniel Jonce Evans

Answer 2

扩展 Larry 的答案，将 errorText 设置为状态中的一个属性（以下示例中的 errorText）。当 TextField 中的值更改时，验证输入并设置该属性（errorText）的值以显示和隐藏错误。

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

根据下方评论更新，errorText被替换为helperText

class PhoneField extends Component
      constructor(props) {
        super(props)
        this.state = { errorText: '', value: props.value }
      }
      onChange(event) {
        if (event.target.value.match(phoneRegex)) {
          this.setState({ errorText: '' })
        } else {
          this.setState({ errorText: 'Invalid format: ###-###-####' })
        }
      }
      render() {
        return (
          <TextField hintText="Phone"
            floatingLabelText="Phone"
            name="phone"
            helperText= {this.state.errorText}
            onChange={this.onChange.bind(this)}
          />
        )
      }
    }

- Mo3z

---

这个不再起作用了。 errorText已被替换为helperText，而布尔值error用来显示它作为错误文本。 - Spenhouet

将错误信息设置到文本框中并不会使文本框内的输入无效，也不会防止表单提交。这只是一种没有实际功能的用户界面行为。 - Up209d

Answer 3

Material-UI v3.9.3 工作版本：

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { helperText: '', error: false };
  }

  onChange(event) {
    if (event.target.value.length > 2) {
      this.setState({ helperText: '', error: false });
    } else {
      this.setState({ helperText: 'Invalid format', error: true });
    }
  }

  render() {
    return (

                   <TextField
                      helperText={this.state.helperText}
                      onChange={this.onChange.bind(this)}
                      error={this.state.error}
                      required
                      id="outlined-required"
                      label="First Name"
                    />
                     );
  }

- Ivan Bitkin

Answer 4

如果errorText是一个空字符串“”，那么它将不会被显示。因此，在getInitialState()函数中将其设置为空字符串即可。

- Larry Maccherone