ssorallen / turbo-react

A JavaScript library that transitions between static HTML pages on navigation; no app server required.
https://turbo-react.herokuapp.com/
Apache License 2.0
274 stars 16 forks source link

immutable Input tag if value is set #9

Closed hallgren closed 9 years ago

hallgren commented 9 years ago

The <input> tag with value= set will become immutable because it´s a controlled component in react.js http://facebook.github.io/react/docs/forms.html

This commit will hopefully fix that and make it behave as it does in pure html.

ssorallen commented 9 years ago

I know I started with a basic regex for fixing HTML before processing it as JSX, but I'm afraid continuing down the path of a million regexes will produce a brittle library that will have edge cases that are difficult to reproduce.

The HTML to JSX converter written for react-magic took a more systematic approach and skipped the JSX intermediate step in favor of generating React.createClass calls for each element. That approach seems more sustainable, extensible, and testable than growing a collection of regexes. It might be worthwhile to see if htmltojsx.js fits into turbo-react and start with it as a base.

hallgren commented 9 years ago

I agree.

The reason I followed the regex path was because I wanted the react components to be uncontrolled. To make them acts as pure HTML and be able to add javascript like it was 1999. I replaced value= with defaultValue= on input tags to accomplish that, is it possible to do that via the HTMLToJSX script?

ssorallen commented 9 years ago

@hallgren Yup it would fit nicely. There is a mapping of attributes that account for a few discrepancies, and you could replace value with defaultValue in there:

var ATTRIBUTE_MAPPING = {
  'for': 'htmlFor',
  'class': 'className'
};
ssorallen commented 9 years ago

I finished integrating react-magic for its HTML to JSX converter, and so this pull request no longer applies to logic in turbo-react. The fix for defaultValue should go into react-magic itself.