根据输入验证文本字段 React Material Ui

Question

你好！当第一个文本字段中插入的值不同于“28.71”时，我正在寻找一种设置错误的方法，否则设置正确

到目前为止我的代码：

class Main extends React.PureComponent {
    render() {
        return (
            <Box sx={SX.root}>
                <Box className="textFieldWrapper">
                    <TextField
                        sx={SX.textField}
                        id="filled-number"
                        type="number"
                        label={this.props.settings.texts.t1}
                        variant="outlined"
                        size="small"
                        style={{width: '100px'}}
                    />
                </Box>
                <Box className="textFieldWrapper2">
                    <TextField
                        sx={SX.textField2}
                        id="filled-number"
                        type="number"
                        label={this.props.settings.texts.t2}
                        variant="outlined"
                        size="small"
                        style={{width: '100px'}}
                    />
                </Box>
            </Box>
        );
    }
}
// -----------------------------------------------------------------------------------------------------------------
//  I N T E R N A L
// -----------------------------------------------------------------------------------------------------------------

// =====================================================================================================================
//  E X P O R T
// =====================================================================================================================
export default Main;

Answer 1

使用 React 组件状态，可以存储 TextField 值并将其用作错误指示器。 Material-UI 公开 error 和 helperText 道具以交互方式显示错误。

看看下面的例子：

<TextField
  value={this.state.text}
  onChange={event => this.setState({ text: event.target.value })}
  error={text === ""}
  helperText={text === "" ? 'Empty field!' : ' '}
/>

根据输入验证文本字段 React Material Ui

Validate textfield based on input React Material Ui

javascript

textfield

reactjs

material-ui