问如何让React侦听Jquery中调用的单击事件
EN

Stack Overflow用户

提问于 2019-05-06 21:40:57

回答 1查看 229关注 0票数 2

我在一个react应用中使用dabeng/OrgChart。当用户单击一个节点时，Jquery会填充一个输入框。here就是一个这样的例子。

我希望react这样做，而不是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");
    }

提前感谢你在这方面给我的任何帮助。

javascript

jquery

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-06 23:04:40

我想你已经承诺在这个库中使用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({})
    });