4

I am trying to wrap semantic ui elements with React so that they are re-usable within my app.

var s_input = React.createClass({
        render: function(){
            return this.transferPropsTo(
                <div className = "ui input">
                    <input type="text" placeholder={this.props.placeHolderTxt} ref="text"/>
                </div>
            )
        }
    });

I am using the the input component inside a from:

<form onSubmit={this.handleSubmit} method="POST">
    <s_input placeHolder={this.props.placeHolderTxt||''}></s_input>
</form>

And here's my handleSubmit method:

handleSubmit:function(e){
    e.preventDefault();
    var text = this.refs.text.getDOMNode().value.trim();
               this.refs.text.getDOMNode().value = '';
               this.props.onSubmit(text);
}

The problem I have is trying to access the text property of the input component when submitting the form so that I can do something like this.refs.text.getDOMNode().value.trim();. Does anybody have any idea on how to go about doing this.

2
  • Could you show the full handleSubmit() method?
    – cantera
    Mar 3, 2014 at 20:07
  • I have edited the question and included my code for handleSubmit()
    – nimgrg
    Mar 3, 2014 at 20:14

1 Answer 1

3

You could do something like

var input = React.createClass({
    render: function(){
        return this.transferPropsTo(
            <div className = "ui input">
                <input className="ui input" type="text" placeHolder={this.props.placeHolderTxt} ref="text"/>
            </div>
        )
    },
    getValue: function() {
        return this.refs.text.getDOMNode().value;
    }
});

Then you can do <s_input ref="myinput" /> and this.refs.myinput.getValue(). You could also structure your code to pass an onChange callback and then read e.target.value the same way you'd deal with any other controlled component: Forms.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.