Question

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.

Était-ce utile?

La solution

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top