React.jsのformタグは 正:encType 誤:enctype

Reactでファイルアップロードするなら注意

React.jsでformタグをつかってマルチパートデータとしてファイルアップロードするとき、
属性名は以下にしないといけない。
正：encType
誤：enctype

実例

正しい例

// ソース
var SomeComponent = React.createClass({

  ...
 
  render: function() {
    return (
        <form action="/upload" method="POST" encType="multipart/form-data">
          <input type="file" name="file_input" />
          <input type="submit" value="Upload" />
        </form>
    );
  }
});

<!-- レンダリング結果 - enctype属性が存在する😊 -->
<form action="/api/file" method="POST" enctype="multipart/form-data">
  <input type="file" name="file1">
  <input type="submit" value="Upload">
</form>

誤り

// ソース
var SomeComponent = React.createClass({

  ...
 
  render: function() {
    return (
        <form action="/upload" method="POST" enctype="multipart/form-data">
          <input type="file" name="file_input" />
          <input type="submit" value="Upload" />
        </form>
    );
  }
});

<!-- レンダリング結果 - enctype属性が存在しない！😢 -->
<form action="/api/file" method="POST">
  <input type="file" name="file1">
  <input type="submit" value="Upload">
</form>

理由

• HTMLタグに指定できる属性として、enctypeではなくencTypeが定義されている
  • Document - Tags and Attributes - HTML Attributes

補足

• Reactのプロパティ名は、DOMのプロパティ名を基にしてないの？質問しているissueもあった
  • Issue #4653 Some DOM props do not match the spec. Do we "fix" them or give up saying props match the DOM spec?