Question

我目前正在处理表。因此，我有一列复选框，甚至还保留了复选框的数量。我只想呈现您可以说的所选行数，或在分页附近的反应表页脚中选中的复选框数。任何帮助将不胜感激。预先感谢

Answer 1

具有状态变量number_of_checked_checkboxes。根据选中的复选框增加/减少其值。

constructor(props) {
    super(props);
    this.state = {number_of_checked_checkboxes: 0}
}

handleCheckBoxClick(e) {
    if (e.target.checked)
        this.setState({number_of_checked_checkboxes: this.state.number_of_checked_checkboxes + 1})
    else
        this.setState({number_of_checked_checkboxes: this.state.number_of_checked_checkboxes - 1})
}

render() {
    const {number_of_checked_checkboxes} = this.state;
    return (
        <div>
            {/* your table + pagination code goes here */}
            <input type="checkbox" onClick={this.handleCheckBoxClick}/>
            {/* your table + pagination code goes here */}
            <div className={'checkbox-counter'}>{number_of_checked_checkboxes}</div>
        </div>
    );
}

希望这会有所帮助。

Answer 2

在react表上做了很多RND之后，我无法弄清楚如何通过React Table道具实现自定义元素渲染。因此，最后我使用了传统的javascript或jquery DOM操作技术。

在componentDidMount中，我在想要的位置添加了元素，但文本不会动态更改，因此，我在检查复选框的方法中做到了这一点。请参见下面的方法：

componentDidMount() {
        let parentDiv = document.getElementsByClassName('-pagination');
        let pageClass = document.getElementsByClassName('select-wrap');
        let elementToAppend = document.createElement('div')
        elementToAppend.id = 'sel'
        let textNode = document.createTextNode(`${this.state.checkItems.length} row selected`)
        elementToAppend.appendChild(textNode);
        pageClass[0].insertAdjacentElement("beforebegin", elementToAppend)
    }

在选中复选框的地方，我更改了该元素的文本：

singleChange = (employeeId, event) => {
        let checkedItems = this.state.checkItems;
        if (event.target.checked) {
            checkedItems.push(employeeId);
        }
        else {
            if (checkedItems.includes(employeeId)) {
                let index = checkedItems.indexOf(employeeId);
                checkedItems.splice(index, 1);
            }
        }
        checkedItems.length == this.props.employees.length ? this.setState({ allChecked: true }) : this.setState({ allChecked: false })
        this.setState({ checkItems: checkedItems })
        //this.appendElements();
        document.getElementById('sel').innerHTML = this.state.checkItems.length <= 1 ? `${this.state.checkItems.length} row selected` : `${this.state.checkItems.length} rows selected`;

    }

在React Table页脚中渲染自定义元素

2 个答案: