使用x-editable with reactjs,如何在项目上调用可编辑的函数？

Question

我是ReactJS的新手,我正在尝试创建一个Reactjs组件,它是使用x-editable的可编辑字段列表.

根据x-editable文档,我需要.editable()为每个字段调用,通常这是通过jQuery访问元素完成的.

我怎么能用React做到这一点？必须在安装组件时完成,我无法找到方法来了解组件何时呈现...

我想知道实现这一目标的最佳方法; 我看了一下React,refs但我不确定它可以提供帮助.所以,我最终给它一个特定的类,然后使用选择调用editable()上的字段,但它只能在渲染已经完成,我不觉得它很优雅.

JS(X)代码:

var EditableField = React.createClass({
    render: function() {
         return <p>{this.props.name}: <a href="#" className="editable_field" name={this.prop.name} data-type="text" data-title="Edit value">{this.props.value}</a></p>
    }
});

在脚本代码中:

$(document).ready(function() {
     $.fn.editable.defaults.mode = 'inline';
     $(".editable_field").editable();

Answer 1

你应该在这个componentDidMount功能中做到这一点.安装组件并准备好DOM时,将调用此函数.阅读更多关于生命周期的信息:http://facebook.github.io/react/docs/component-specs.html

示例(使用refs而不是类选择器):

var EditableField = React.createClass({
    componentDidMount: function() {
        $(this.refs.editable.getDOMNode()).editable()
    },
    render: function() {
         return <p>{this.props.name}: <a href="#" ref="editable" name={this.prop.name} data-type="text" data-title="Edit value">{this.props.value}</a></p>
    }
});

请注意,许多"jquery插件"将执行繁重的DOM操作,并且这些操作并不总能与React一起使用.