Question

嗨，我一直在尝试获取react中映射按钮的ID，并将其传递给处于我状态的变量。

这是我的代码

render() {

    let {firstpost, selectedGroup} = this.state;
    let visibleModal = this.showModal;

    var groupList = firstpost.map(function(item, i){

    return (
        <li key={i}>
        <div >
        <button id={myButton+[i]} onClick={visibleModal}>
                btn{firstpost[i]}
            </button>

        </div>
        </li>
    )
    });
return (
    <div>
        {groupList}
         <Modal
                width={'50%'}
                visible={visible}
                onCancel={this.handleCancel}
                footer= {null}
            >

                <Form onSubmit={this.onSubmit}>
                    <span>Are you sure you want to click</span>
                    <Button type="primary" htmlType="submit" style={{margin: '0 0 0 50%'}}>click</Button>
                </Form>

            </Modal>
    </div>

我尝试在我的componentsWillMount中像这样使用Jquery

let _this = this;
$(":button").click(function (event) {
        _this.setState({idName: $(this).attr('id')});
    });

我也尝试过

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
    _this.setState({idName:this.id});
};
}

但是这似乎没有用，我不确定还有其他方法。任何想法将不胜感激

Answer 1

如果您只想更新状态idName，并且不需要引用每个按钮，则可以在按钮的onClick回调中设置状态：

var groupList = firstpost.map((item, i) => 
    <li key={i}>
        <div >
            <button onClick={(e) => {
                        this.setState({idName: `myButton${i}`})
                    }}>
                btn{item}
            </button>
        </div>
    </li>
);

顺便提一下，请注意仅将索引用作key。它可能导致不可预测的渲染问题，因为密钥是React用来标识DOM元素的唯一内容。最好为列表中的每个项目分配一个唯一的ID，并将其用作key。 Here和here是解释这些问题的有用文章。

如何在React中的映射循环中获取单击按钮的ID

1 个答案: