Javascript 如何更改；“错误”；材质ui元素的属性？

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

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;

import React，{Component}来自'React'；
从“@material ui/core”导入{TextField}；
类ProductField扩展组件{
建造师（道具）{
超级（道具）；
this.isValid=this.isValid.bind（this）；
}
isValid（）{
日志（“检查是否有效…”）；
}
componentDidMount（）{
log（“这不起作用”）；
}
render（）{
返回(
{
控制台日志（“更改”）；
const{value}=event.target；
this.setState（{searchValue:value}）；
}}
{…this.props.input}
/>
);
}
}
导出默认产品字段；

调用onChange时，我想检查文本字段的状态，如果this.props.meta.error不是空的，我想设置文本字段prop“error”，如果是空的，我想取消设置“error”prop。 现在，甚至console.log（“检查是否有效…”）也不起作用，这表明根本没有触发onChange事件。

---

我做错了什么？

您的代码中有几个问题：

您需要在

构造函数中初始化
状态
，这样该状态对
文本字段
是可靠的，您还必须在
状态
中设置一个属性，该属性将处理
字段是否有效
或是否为“错误”

您需要创建一个

方法

来验证您的

文本字段

值，并在此方法中根据字段的有效性更新

状态

，您可以在此处添加

this.props.meta.error

或任何其他验证您的值的内容，请记住在

状态

正确更改后调用将验证您的值的方法，可能将其用作

设置状态

方法上的

回调

您必须在

文本字段中添加
属性
，以捕获它是
错误还是
有效

import React，{Component}来自“React”；
从“@material ui/core”导入{TextField}”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
搜索值：“”，
isValid:false
};
this.isValid=this.isValid.bind（this）；
}
isValid（）{
日志（“检查是否有效…”）；
this.setState（{isValid:this.state.searchValue.length>6}）；
}
componentDidMount（）{
log（“这不起作用”）；
}
render（）{
返回(
{
控制台日志（“更改”）；
const{value}=event.target；
this.setState（{searchValue:value}，（）=>{
这个.isValid（）；
});
}}
/>
);
}
}
导出默认应用程序；

---

检查此项以获得一个工作示例

您的代码中有几个问题：

您需要在

构造函数中初始化
状态
，这样该状态对
文本字段
是可靠的，您还必须在
状态
中设置一个属性，该属性将处理
字段是否有效
或是否为“错误”

您需要创建一个

方法

来验证您的

文本字段

值，并在此方法中根据字段的有效性更新

状态

，您可以在此处添加

this.props.meta.error

或任何其他验证您的值的内容，请记住在

状态

正确更改后调用将验证您的值的方法，可能将其用作

设置状态

方法上的

回调

您必须在

文本字段中添加
属性
，以捕获它是
错误还是
有效

import React，{Component}来自“React”；
从“@material ui/core”导入{TextField}”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
搜索值：“”，
isValid:false
};
this.isValid=this.isValid.bind（this）；
}
isValid（）{
日志（“检查是否有效…”）；
this.setState（{isValid:this.state.searchValue.length>6}）；
}
componentDidMount（）{
log（“这不起作用”）；
}
render（）{
返回(
{
控制台日志（“更改”）；
const{value}=event.target；
this.setState（{searchValue:value}，（）=>{
这个.isValid（）；
});
}}
/>
);
}
}
导出默认应用程序；

---

检查一下这个示例

您正在使用onChange更新状态，但我猜（我不能肯定）值和错误数据来自props。因此，第一个问题是，您现在似乎没有正确控制inputRight，甚至console.log（“这不起作用”）也不起作用，这表明根本没有触发onChange事件。这没有道理。为什么componentDidMount控制台日志会提示一些关于onChange的信息？您正在使用onChange更新状态，但我的猜测（我不能肯定）是值和错误数据来自props。因此，第一个问题是，您现在似乎没有正确控制inputRight，甚至console.log（“这不起作用”）也不起作用，这表明根本没有触发onChange事件。这没有道理。为什么componentDidMount控制台日志会对onChange提出一些建议？

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;