Question

我在reactjs应用程序中面临这个奇怪的问题。我有一个HTML表格，我有一个搜索栏，搜索栏中输入的内容，过滤所有搜索过的词的行，然后在这些过滤的行中突出显示。 onkeyUp事件附加到搜索输入字段。我有一个onClick附加到所有行。

问题：当我搜索然后点击行时，onClick不起作用。当我在搜索任何内容之前单击时，onClick可以正常工作。

疑似问题：每次搜索任何内容时，每次onkeyup事件都会完全删除该表，并仅使用已搜索其中的团队的行进行重建。这可能会从构建的新表中取消onclick方法。

这是我的HTML和搜索功能

 searchFunction() {


        var input, filter, table, tr, td, i;
        input = document.getElementById("search-table");
        var value = input.value



        filter = input.value.toUpperCase();
        table = document.getElementById("speech-table");
        table.innerHTML=bak;
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            var a1= td.getElementsByTagName("a")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    var trimIndex=a1.innerHTML.toUpperCase().indexOf(filter);
                    var endIndex=trimIndex + filter.length + 3;
                    var output = [a1.innerHTML.slice(0, trimIndex), '<b>', a1.innerHTML.slice(trimIndex)].join('');
                    output = [output.slice(0, endIndex), '</b>', output.slice(endIndex)].join('');
                    a1.innerHTML=output;
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

    }

我的搜索输入和表格html

input type="text" id="search-table" onChange={() => this.searchFunction()}
                               className="form-control search-sentances pull-right"
                               placeholder="Search"/>
                    </div>
                    <div className="panel-body scrollable no-pad-top-pad-bot2 sentance-scrollable">
                        <div className="subtitle-scroll">
                            <div className="tab-content">
                                <div className="tab-pane slide-left active" id="tab2sentancetable">
                            <table className="table sentance-table" id="speech-table">
                                <tbody>
                                {this.state.sentances_array.map((item, i) => (
                                    <tr key={item.id} id={item.id} onClick={() => this.sentance_click(item.time)}>
                                        <td className="edit-timing-sub"><span className="bold fs-12 text-success">{item.time.toFixed(2)}</span><br/>
                                            <span className="bold fs-12 text-success">{item.stopTime.toFixed(2)}</span>
                                        </td>
                                        <td>
                                            <EditableTextField name='username' value={item.words} onUpdate={this.handleRowUpdate} placeholder='Enter spoken words'/>
                                        </td>
                                        <td>
                                            <a href="#" className="text-danger fs-16"><span
                                                className="fa fa-pencil m-l-10"></span></a>
                                            <a href="#" className="text-danger fs-16"><span
                                                className="fa fa-trash m-l-10" onClick={()=>this.deleteRow(item.id)}></span></a>
                                        </td>
                                    </tr>
                                ))}


                                </tbody>
                            </table>

即使搜索完成后如何才能使onClick工作？

Answer 1

searchFunction(event) {
    let filterText = event.target.value;
    let outputArray = this.state.sentances_array.filter(el => {
      return item.words.indexOf(el) != -1;
    })

    this.setState({sentances_array: outputArray});
}

这是应该如何看待你的搜索功能。基本上，当用户输入内容时，您会过滤数组，并且每次state更改时都会对重新呈现表做出反应。

搜索过滤表行使onClick无法正常工作

1 个答案: