Question

我正在尝试使用React包装语义ui元素，以便它们可以在我的应用程序中重复使用。

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

我正在使用from：

中的输入组件

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

这是我的handleSubmit方法：

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

我遇到的问题是在提交表单时尝试访问输入组件的 text 属性，以便我可以执行this.refs.text.getDOMNode().value.trim();之类的操作。有没有人知道如何去做这件事。

Answer 1

您可以执行类似

的操作

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;
    }
});

然后你可以<s_input ref="myinput" />和this.refs.myinput.getValue()。您还可以构造代码以传递onChange回调，然后以与处理任何其他受控组件相同的方式阅读e.target.value：http://facebook.github.io/react/docs/forms.html。

ReactJS：访问父级中的子组件属性

1 个答案: