Question

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

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 prop设置为“ error”，如果它为空，那么我想取消设置“错误”道具。现在，即使console.log（“正在检查是否有效...”）也不起作用，这表明onChange事件根本没有被触发。我在做什么错了？

Answer 1

您的代码中有几个问题：

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

valid

选中此sandbox以获得有效的示例

如何更改材质用户界面元素的“错误”属性？

1 个答案: