0

I am developing some components based on React.js for render jQuery Mobile objets.

I created the follow class:

var JQueryMobileInputText = React.createClass({
  displayName: 'JQueryMobileInputText',

  getDefaultProps: function() {
    return {'name':'n'+uniqid(), 'label':'', 'type':'text', value:'', 
        'hideLabel':false
    }
  },

  render: function() {
    var label = React.createFactory('label');
    var input = React.createFactory('input');
    var classStr = this.props.class;
    if (this.props.hideLabel)
    {
        classStr += (classStr == "" ? '' : ' ') +  'ui-hide-label';
    }
    return (
      React.DOM.div({'data-role':'fieldcontain', 'class':classStr},
        label({'for':this.props.name}, this.props.label),
        input({'type':this.props.type, name:this.props.name, 
                id:this.props.name, value:this.props.value, 
                placeholder:this.props.label}
        )
    ));
  }
});
JQueryMobileInputText = React.createFactory(JQueryMobileInputText);

And I called it as below:

 render: function() {
    return React.DOM.div(null,
      JQueryMobileForm(null,
        JQueryMobileInputText({name:'texto1', label:'Texto', hideLabel:true})
      ),
    );
  }

I expected the follow HTML as result:

<div data-role="fieldcontain" class="ui-hide-label">
    <label for="texto1">Texto</label>
    <input type="text" name="texto1" id="texto1" value="" 
        placeholder="Texto"/>
</div>

But I get something different than this:

<div data-role="fieldcontain" data-reactid=".0.0.1.0.5.0" 
    class="ui-field-contain">
    <label data-reactid=".0.0.1.0.5.0.0">Texto</label>
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
        <input type="text" name="texto1" id="texto1" value="" placeholder="Texto" data-reactid=".0.0.1.0.5.0.1">
    </div>
</div>

My questions are:

  1. Why the label's "for" property was not added?
  2. Why my div's class does not have the ui-hide-label string?
  3. Why a new div was added for the input?
Joao M
  • 664
  • 1
  • 9
  • 19

2 Answers2

0

Searching the internet I solve my problem:

1) Why the label's 'for' property was not added?

Here the solution: React label element

2) Why my div's class does not have the ui-hide-label string?

Here the solution: https://facebook.github.io/react/docs/class-name-manipulation.html

Community
  • 1
  • 1
Joao M
  • 664
  • 1
  • 9
  • 19
0

For number 1, as per this answer https://stackoverflow.com/a/22752418/930517, you need to use htmlFor instead of for.

On number 2, does it work if you exchange React.DOM.div({'data-role':'fieldcontain', 'class':classStr}, for React.DOM.div({'data-role':'fieldcontain', 'className':classStr},?

Finally, I would suggest there is other code on the page manipulating the class names and also adding the extra div around your input as neither of these are mentioned in the code you posted above.

Are you using any other libraries other than React? Can you test your component outside your app (e.g. in a jsFiddle)?

Community
  • 1
  • 1
Ashley 'CptLemming' Wilson
  • 8,686
  • 2
  • 32
  • 36