reactjs - 我使用 React js 和 Material-UI。如何在按钮提交单击时验证 "correct"绿色验证？

Question

请帮忙。我使用 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>    

Answer 1

我尝试在组件状态中使用一个额外的字段，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')
);