Question

我是新来的反应，我一直困在中间请帮助我：

我在react js中有一个类组件。我有<ul></li></li></ul>，这里我在一些数据库查询后从jquery添加<li>。现在我如何将liClick事件添加到li？ bcz当我从jquery添加它时，即它给出＆＃39; 未定义的函数this.getValue ＆＃39;反应js。

以下是示例：

class getData extends React.Component {

    constructor(props) {
        super(props);
    }

    getValue(p1,p2,p3) {
        .... 
    }

    render() {

        var dropdown = <ul id="dropD"></ul>

        return (
            {dropdown}
        )
    }
}

现在来自Jquery，我得到了一些数据库查询并将其附加到ul，如下所示

<li onClick=this.getValue('x','xx','xxx')>value 1</li>
<li onClick=this.getValue('x','xx','xxx')>value 2</li>
<li onClick=this.getValue('x','xx','xxx')> ... </li>

在这里，我正确地获取了所有下拉列表，但是当我点击下拉列表（li）标签时，我得到的是未定义的.getValue函数＆＃39;因为我是动态添加它的。如果我在ul下硬编码li，它能够识别函数并且正常工作，只有在我动态添加li时才会发出。

如果我动态添加li标记，请告诉我如何在类组件中调用onClick函数

Answer 1

使用jQuery修改您的react DOM树被认为是反模式，您不应该这样做。当React尝试与虚拟DOM进行比较时，这只会让您感到痛苦。事实上，我很惊讶React并没有警告你这件事。

您不想在React内部添加新的getData个孩子的原因是什么？

另外，另一件事也是向我跳出来，本例中的组件称为componentDidMount。这个组件的设计目的是什么？这似乎是一个奇怪的名字使用。

如果您尝试填充下拉列表，我建议您使用class MySelectBox extends React.Component { constructor(props) { super(props); this.state = { items: ['Orange', 'Banana', 'Apple'] }; } componentDidMount() { window.$.ajax({ url: "/api/getMyItem" }).done(function(result) { this.setState((state) => { state.items.push(result); return state; }); }); } handleClickEvent(e, value) { .... } render() { return ( <ul> {this.state.items.map((label) => { return ( <li onClick={this.handleClickEvent.bind(this, label)}> {label} </li> ); })} </ul> ); } }进行数据库调用，并在成功时更新您的查看数据。

例如

Write-EventLog -LogName HCScripts -Source 'Test (Brecht)' -EventId 4 -Message "<Data Name=""MyKey1"">MyValue1</Data>"

反应js绑定点击事件

1 个答案: