请帮忙。我使用 React js 和 Material-IU。我使用 errorText 进行了“不正确的”红色文本字段验证。如何在单击按钮提交时用绿色验证“正确”?
validate = () => {
const cardNumber = '1234567890123456'; //credit card form with 2 fields
const expiryNumber = '1234';
let isError = false;
const errors = {};
if (this.state.number != cardNumber) { //cardNumber validation
isError = true;
errors.numberError = 'failed';
}
if (this.state.expiry != expiryNumber) { //expiry validation
isError = true;
errors.expiryError = "failed";
}
if(isError) {
this.setState({
...this.state,
...errors
});
}
return isError;
}
onSubmit = e => { // on Button submit
e.preventDefault();
const err = this.validate();
if (!err) {
this.setState({
number: "",
expiry: ""
});
console.log(this.state);
};
} // next will be render <TextField>
最佳答案
我尝试在组件状态中使用一个额外的字段,successValidation
,我根据验证结果在 onSubmit 中更改该字段。然后,我使用该状态属性来确定要传递给 underlineStyle
(TextField 的属性)的样式。也许不是最干净的解决方案(不知道),但据我所知它是有效的。您可以在 this JSFiddle demo 中看到它的实际效果。 .
顺便说一句:我已经有一段时间没有使用 Material-UI 了,但是他们有非常好的文档来刷新你的内存。例如,您可以在 this page 底部查看 TextField 的所有属性。 .
const { RaisedButton, MuiThemeProvider, getMuiTheme, TextField } = MaterialUI;
class Test extends React.Component {
state = {
value: 'good',
error: false,
successValidation: false
}
handleInputChange = (e, newValue) => {
// reset errors and validation as well
this.setState({
value: newValue,
error: false,
successValidation: false
});
}
isValid = () => {
const {value} = this.state;
return value != 'bad';
}
onSubmit = () => {
if(this.isValid()) {
this.setState({successValidation: true, error: false});
} else {
this.setState({error: true});
}
}
render = () => {
const {value, error, successValidation} = this.state;
const underlineStyle = successValidation ? { borderColor: 'green' } : null;
return (
<div style={{width: '50%', margin: '0 auto'}}>
<h3>The input "bad" will cause error</h3>
<h3>All other input will cause green underline on submit</h3>
<TextField
errorText={error ? 'Validation error!' : ''}
name="test"
value={value}
onChange={ this.handleInputChange }
underlineStyle={underlineStyle}
/>
<RaisedButton onClick={ this.onSubmit }>Submit</RaisedButton>
</div>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Test />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
关于reactjs - 我使用 React js 和 Material-UI。如何在按钮提交单击时验证 "correct"绿色验证?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46059625/