React-Toolboxダイアログフォームに必要なフィールド

Question

は、反応ツールボックスコンポーネントダイアログで必要な入力フィールドを使用する方法がありますか？そこ

あなたはアクションを定義することができます。私は、フォームでHTML5必須フィールドが満たされているかどうかをチェック提出または防ぐデフォルトのアクションとしてアクションを定義したい

http://react-toolbox.com/#/components/dialog

Answer 1

これは、私はどのようにあります反応ツールボックスで検証を行います。

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     username: '', 
     active: false, // for Dialog open/close 
     errors: {} 
    }; 
    this.updateState = this.updateState.bind(this); 
    this.validateFormField = this.validateFormField.bind(this); 
    } 

    updateState(value, e) { 
    this.setState({ 
     [e.target.name]: value 
    }); 
    } 

    validateFormField(e) { 
    const propName = e.target.name; 
    const value = e.target.value; 
    const errors = { ...this.state.errors }; 

    errors[propName] = ''; 
    switch (propName) { 
     case 'username': 
     if (value === '') { 
      errors[propName] = 'Username required'; 
     } 
     // add other checks for username 
     break; 
     // add more for fields 
     default: 
    } 

    this.setState({ 
     errors 
    }); 
    } 

    render() { 
    const actions = [ 
     { label: 'Cancel', onClick: this.cancelAction }, 
     { label: 'Submit', onClick: this.submitForm } 
    ]; 
    return (
     <Dialog 
     actions={actions} 
     active={this.state.active} 
     > 
     <Input 
      type="text" 
      name="username" 
      label="Username" 
      onChange={this.updateState} 
      value={this.state.username} 
      onBlur={this.validateFormField} 
      error={this.state.errors.username} 
     /> 
     </Dialog> 
    ); 
    } 
} 

これが役立ちます。