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

Question

有没有办法在 react-toolbox 组件对话框中使用所需的输入字段？

您可以在此处定义操作：我想将操作定义为提交或阻止检查表单中是否填写 html5 必填字段的默认操作

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

Answer 1

这就是我在 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>
    );
  }
}

希望这会有所帮助。