ReactJS:访问父组件中的子组件属性

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

我遇到的问题是在提交表单时尝试访问 input 组件的 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与处理任何其他受控组件的方式相同:Forms .