javascript - 带有必填字段的React-Toolbox对话框形式

有什么方法可以在react-toolbox componenets对话框中使用所需的输入字段？

您可以在其中定义动作：我想将动作定义为提交或阻止默认动作，以检查是否以html5必填字段的形式填写

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

最佳答案

这就是我在react-toolbox中进行验证的方式。

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>
    );
  }
}

希望这可以帮助。