如何更改 material-ui 元素的“错误”道具？答案

【问题标题】：How to change the "error" prop of a material-ui element?如何更改 material-ui 元素的“错误”道具？
【发布时间】：2020-01-08 17:53:12
【问题描述】：

我正在尝试验证表单字段并具有以下代码：

import React, {Component} from 'react';
import {TextField} from '@material-ui/core';

class ProductField extends Component {
    constructor(props) {
        super(props);
        this.isValid = this.isValid.bind(this);
    }

    isValid() {
        console.log("Checking if valid...");
    }

    componentDidMount() {
        console.log("this isn't working");
    }
    render() {

        return (

                <TextField style={{width:"100%"}} id={this.props.label} label={this.props.label} variant="outlined"
            hintText={this.props.label}
            helperText={this.props.meta.touched && this.props.meta.error}
            onChange={event => {
                console.log("changed");
                const { value } = event.target;
                this.setState({ searchValue: value });
            }}
            {...this.props.input}
                />
        );
    }

}

export default ProductField;

调用 onChange 时，我想检查 TextField 的状态，如果 this.props.meta.error 不为空，我想将 Text Field 属性设置为“error”，如果它为空，那么我想取消设置“错误”道具。现在，即使 console.log("Checking if valid...") 也不起作用，这表明 onChange 事件根本没有被触发。我做错了什么？

【问题讨论】：

您正在使用 onChange 更新状态，但我的猜测（我不能肯定）是值和错误数据来自 props。所以第一个问题是你似乎没有正确控制你的输入
现在，即使 console.log("this is not working") 也不起作用，这表明 onChange 事件根本没有被触发。这没有意义。为什么 componentDidMount 控制台日志会提示有关 onChange 的信息？

标签： javascript reactjs material-ui

【解决方案1】：

您的代码中有几个问题：

您需要在constructor 中初始化您的state，因此状态对您Textfield 来说是可靠的，您还必须在state 中设置一个属性，如果field 是valid 或者是一个“错误”。
您需要创建一个method 来验证您的TextField 值，并在此方法中根据字段的有效性更新state，在这里您可以添加this.props.meta.error 或其他任何验证您的值，并记住在正确更改 state 后调用将验证您的值的方法，也许将其用作 setState 方法上的 callback。
您必须将prop 添加到您的TextField 组件中才能捕获它是error 还是valid。

import React, { Component } from "react";
import { TextField } from "@material-ui/core";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: "",
      isValid: false
    };
    this.isValid = this.isValid.bind(this);
  }

  isValid() {
    console.log("Checking if valid...");
    this.setState({ isValid: this.state.searchValue.length > 6 });
  }

  componentDidMount() {
    console.log("this isn't working");
  }
  render() {
    return (
      <TextField
        style={{ width: "100%" }}
        id={this.props.label}
        label={"example"}
        variant="outlined"
        error={!this.state.isValid && this.state.searchValue != ""}
        onChange={event => {
          console.log("changed");
          const { value } = event.target;
          this.setState({ searchValue: value }, () => {
            this.isValid();
          });
        }}
      />
    );
  }
}

export default App;

查看sandbox 以获取工作示例

【讨论】：