关于twitter bootstrap：React中的子组件未绑定

Child Component Not Binding in React

我有以下问题。我有一个名为Modal的子组件，它由一个引导按钮和一个弹出窗口组成。 Modal出现在名为renderPosts的渲染组件内部。

Component.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

deleteThis(id){
console.log("THE ID IS", id);
}

renderPosts(post) {
return (
<tr key={post.id}>

<td className="col-md-3"> {post.id}</td>
<td onClick = {this.deleteThis.bind(this, post.id)}>CLICK HERE</td>
<td>
<Modal
modalId="deletepost"
className="btn btn-danger"
onClick={this.deleteThis.bind(this,post.id)} />
</td>

</tr>
);
}

render() {
return (

<table className='table table-striped header-fixed'>
<thead>
<tr>
<th>Name</th>
<th> Test </th>
<th> Delete </th>
</tr>
</thead>
<tbody>
{this.props.post.map(this.renderPosts.bind(this))}
</tbody>
</table>

);
}
}

function mapStateToProps(state) {
return { post:state.post.all};
}

当我的模态如下时，它可以正常工作。我可以通过附加到称为deleteThis：

的道具的onClick方法输出每个不同的ID

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import React from 'react';

const Modal = ({onClick, modalId, className}) => {
return (

<button
type="button"
data-dismiss="modal"
className="btn btn-danger pull-xs-right"
onClick={onClick}>
DELETE
</button>

);
}

export default Modal;

这是我被困住的地方。我想在Bootstrap中使用弹出模态功能。下面的代码允许我获取弹出功能。但是我的问题是，当我单击按钮时，onClick方法始终显示id为1。

Modal.js(带有Modal的引导按钮)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from 'react';

const Modal = ({onClick, modalId, classNameNameName}) => {
return (

<button type="button" className="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<button type="button" className="btn btn-default" data-dismiss="modal" onClick={onClick.bind(this)}>Show Id</button>

);
}

export default Modal;

我认为上面代码的id总是1的原因是因为带有onClick方法的按钮位于Modal中，该Modal仅在单击其他按钮时才弹出。

有什么方法可以将ID绑定到上面代码中的onClick处理程序上？

我想我需要做类似的事情：

1	onClick={this.deleteThis.bind((this,feed.id).bind(this))} />

但是我不知道如何将其转换为有效的代码

如您在此处看到的，Modal被定义为功能性无状态组件

1 2	const Modal = ({onClick, modalId, classNameNameName}) => { // ...

功能组件没有关键字this。

但这不是问题，真正的问题是您所有的Modal元素在html中都具有相同的ID myModal，并且在单击另一个元素时会触发相同的事件。

这是一个有效的小提琴，我在其中分配了为模态动态生成的ID。

https://jsfiddle.net/free_soul/2ub6rmkc/