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

Question

Helo. I am looking for a way to set error whenever the value inserted in the first text field is different than "28,71",else set correct

My code so far:

 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> ); } } // ----------------------------------------------------------------------------------------------------------------- // INTE R NAL // ----------------------------------------------------------------------------------------------------------------- // ===================================================================================================================== // EXPO R T // ===================================================================================================================== export default Main;

Answer 1

Using a react component state, one can store the TextField value and use that as an indicator for an error. Material-UI exposes the error and helperText props to display an error interactively.

Take a look at the following example:

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