将事件从 html 表单发送到 jsx 组件

Question

我是 React 新手， 我的问题是： 我有一个 html 形式的按钮（Btn）和一个反应输入文本（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);

按钮在html文件中；这个按钮是jquery datatable做的一个搜索按钮，所以必须在datatable里面。

这是控制器：

jd = dateComponent.create('jd',
                {
                    title:"",
                    name:"filter_joinDate",
                    class:"form-control form-filter datepicker"
                });

那么如何制作这个活动呢？

Answer 1

首先，不要有

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

您应该使用 refs，这就是它们的用途，请参阅 http://facebook.github.io/react/docs/more-about-refs.html。

其次，你的 getValue 函数根本不符合 React 的精神。要么您也使用 refs，然后您可以通过 this.refs.input.value 获取您的输入值，或者您使用状态来存储该值。

关于你的问题：

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

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: function() {
    $("#mybutton").doSomethingWithJquery()
},