Javascript 从html表单向jsx组件发送事件

我是新来的反应者， 我的问题是: 我有一个html格式的按钮（Btn）和一个react输入文本（TXT）组件；我想让按钮点击txt的“oninput”事件

这是组件jsx文件：

(function(app){

    function component(){

        var Date = React.createClass({
            getValue: function() {
                var el = $(this.getDOMNode());
                var input = el[0].childNodes[1].childNodes[0];
                return $(input).val();
            },
            componentDidMount: function() {
                var el = $(this.getDOMNode());
                var element = el[0].childNodes[1];
                $(element).datetimepicker({
                    autoclose: true,
                    format: 'yyyy-mm-dd',
                    startView: 'decade',
                    minView: 'month',
                    isRTL: false,
                    //pickTime: false,
                    pickerPosition:"bottom-right"
                });
            },
            render: function() {
                return (<div className="form-group" style={{display: '-webkit-box'}}>
                    <label>{this.props.title}</label>
                    <div className="input-group date ">
                        <input type="text" name={this.props.name} style={{paddingRight: 0,
                            fontSize: 12}}  readOnly className="form-control"  className={this.props.class}/>
                        <span className="input-group-btn">
                            <button className="btn default date-set" type="button"><i className="fa fa-calendar"></i></button>
                        </span>
                    </div>
                </div>);
            }
        });

        function create(elementId,props){
            return React.render(<Date {...props} />, document.getElementById(elementId));
        }

        return {
            create:create
        };
    }
    app.component('dateComponent',component);

})(beirutHubBaseApp);

---

那么，如何举办这次活动呢？

首先，不要

var el = $(this.getDOMNode());
var element = el[0].childNodes[1];

您应该使用REF，这就是它们的用途，请参见

其次，getValue函数根本不符合React的精神。您也可以使用refs，然后通过

this.refs.input.value

获取输入值，或者使用状态存储值

关于你的问题：

• 如果您想对点击按钮做出反应以触发文本字段中的某些内容，则应在componentDidMount中添加侦听器，如下所示：

组件安装：

var c = this
$("#mybutton").click(function(e) {
    // do something here, with c instead of this to refer to the component
})

不要忘记也要实现componentWillUnmount以清除侦听器

• 如果您想触发按钮中的某些内容以响应输入（我相信这就是您要查找的内容），您应该向输入添加一个侦听器，如下所示

  onInput={this.handleInput}

  ，并以这种方式进行handleInput：

手动输入：

handleInput: function() {
    $("#mybutton").doSomethingWithJquery()
},

---

亲爱的Mijamo，谢谢你，但注意到我试图通过输入onInput event console.log（“某物”）进行调试，但它没有起作用；它只在我加载屏幕时打印

handleInput: function() {
    $("#mybutton").doSomethingWithJquery()
},