Question

我在React应用中使用dabeng/OrgChart。当用户单击节点时，Jquery会填充一个输入框。可以看到一个示例here。

我想代替Jquery来执行此操作，因此我可以将所选节点保存为状态，而不是将输入框保存为值。

我已经尝试过使用引用之类的事情，试图查看是否可以在jquery函数中调用react方法，但并不高兴。

也许可以使用publisher/subscriber model，但不确定如何实现类似的方法。

class OrgTreeBase extends Component {
    state = {
        list: {
            'name': 'Ball game',
            'children': [
                {
                    'name': 'Football',
                    'children': [
                        {
                            'name': 'man united',
                            'children': [
                                { 'name': 'fred' },
                                { 'name': 'ander herrera' },
                                { 'name': 'scott mctominay' },
                            ]
                        }
                    ]
                },
                {
                    'name': 'Basketball',
                    'children': [
                        {'name': 'lakers'},
                        { 'name': 'warriors' },

                    ]
                },
                { 'name': 'Volleyball' }
            ]
        },
        currentLevel: 0,
        currentItem: [],
        selectedItem: '',
    };

    componentDidMount() {
        this.$el = $(this.el);
        let datasource = this.state.list;

        this.getId = () => {
            return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001);
        }

        //creates the initial chart with the following settings
        var oc = $('#chart-container').orgchart({
            'data': datasource,
            'chartClass': 'edit-state',
            'exportButton': true,
            'exportFilename': this.state.name,
            'parentNodeSymbol': 'fa-th-large',
            'createNode': function ($node, data) {
                $node[0].id = this.getId;
            },
        })

        //when node is selected
        oc.$chartContainer.on('click', '.node', function () {
            var $this = $(this);
            console.log("this is : " + $this.find('.title').text());
            $('#selected-node').val($this.find('.title').text()).data('node', $this);
        });

...

    onNodeSelected = (node) => {
        console.log(node + " was selected");
    }

我想看到单击节点时调用this.onNodeSelected（）。

    onNodeSelected = (node) => {
        console.log(node + " was selected");
    }

在此先感谢您提供的任何帮助。

Answer 1

IMO，您已经承诺将jQuery与该库一起使用。所以我不明白为什么你不能只做这样的事情，让我们说：

    //somewhere above
    const self = this;

    //when node is selected
    oc.$chartContainer.on('click', '.node', function () {
        var $this = $(this);
        console.log("this is : " + $this.find('.title').text());
        $('#selected-node').val($this.find('.title').text()).data('node', $this);

        //set state and save node here on click. Or the node's text value 
        self.setState({})
    });

因为，这不在您的要求之内，所以我建议这样做的原因是因为DOM似乎是由orgChart库生成的，因此很难添加反应侦听器。而且没有任何理由不能在jQuery click函数中调用react setState。

如果我不提出警告，即jQuery和React都是相当大的库，它们在很大程度上完成相似的功能，那么我建议这样做也是错误的。您可能已经知道这一点，但是，我仍然建议您找到一个不同的组织库，或者使用React创建自己的组织库。

如何让React监听Jquery中调用的click事件

1 个答案: