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一起使用。

Answer 2

您可以使用react-x-editable（对x-editable版本做出反应）。目前并非支持所有选项。我会尝试支持大多数选项。

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

2 个答案: