formsy-reactとは？

formsy-reactについて書いていきたいと思います。
私は未来電子という会社でインターンをさせてもらっています。
まだまだ実力不足であるため間違いがある可能性が高いです。
お手柔らかにお願いします。

formsyとは

formsyとはreactにおいて入力(input)を作り、入力の検証を設定するものです。

formsy-reactを使うことで自分が設定したい入力フォームを作ることができ、
エラー表示も好きに設定することができます。

インストール方法

yarn add formsy-react react react-dom
でインストールできます。

使用例

公式githubにあった例を紹介します。

まずformsy elementを作成します

// MyInput.js
import { withFormsy } from 'formsy-react';
import React from 'react';

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    // Important: Don't skip this step. This pattern is required
    // for Formsy to work.
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    // An error message is returned only if the component is invalid
    const errorMessage = this.props.getErrorMessage();

    return (
      <div>
        <input onChange={this.changeValue} type="text" value={this.props.getValue() || ''} />
        <span>{errorMessage}</span>
      </div>
    );
  }
}

export default withFormsy(MyInput);

次に作成したformsy elementを使用します。

import Formsy from 'formsy-react';
import React from 'react';
import MyInput from './MyInput';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.state = { canSubmit: false };
  }

  disableButton() {
    this.setState({ canSubmit: false });
  }

  enableButton() {
    this.setState({ canSubmit: true });
  }

  submit(model) {
    fetch('http://example.com/', {
      method: 'post',
      body: JSON.stringify(model),
    });
  }

  render() {
    return (
      <Formsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
        <MyInput name="email" validations="isEmail" validationError="This is not a valid email" required />
        <button type="submit" disabled={!this.state.canSubmit}>
          Submit
        </button>
      </Formsy>
    );
  }
}

参照したサイト