Javascript 在Reactjs中停止事件传播

我正在尝试创建父组件和子组件。在我的例子中，子组件

有一个包装器

div

和

input

元素。我有一个用于

div

的单击事件，以及配置的

输入的更改事件

我需要单击事件来删除此人，而当我键入输入时，它应该更新姓名。出于某种原因，当我开始在输入字段中键入时，这两个事件都会被触发。我尝试使用
preventDefault（）
和
stopPropagation（）
取消事件，但不起作用。任何帮助都会得到报答

请找到下面的演示代码


（函数（）{
类Person扩展React.Component{
render（）{
返回(
{this.props.name}:{this.props.age}
{
ev.preventDefault（）；
ev.stopPropagation（）；
ev.nativeEvent.stopImmediatePropagation（）；
ev.nativeEvent.preventDefault（）；
ev.nativeEvent.stopPropagation（）；
this.props.onNameChange（）；
}
}
/>
)
}
}
类应用程序扩展了React.Component{
状态={
人民:[{
年龄:36岁，
id:1，
姓名：“乔恩”
}, {
年龄:28，
id:2，
姓名：“鲍勃”
}],
}
onNameChange（）{
console.log（'onNameChange'）
}
onClickParent（）{
console.log（'onClickParent'）
}
render（）{
返回(
{
this.state.people.map（person=>{
返回(
)
})
}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
})();
我认为您应该停止在输入元素的
onClick
hander中的传播。这是否按预期工作


（函数（）{
类Person扩展React.Component{
render（）{
返回(
{this.props.name}:{this.props.age}
{
e、 停止传播（）
}}
聚焦={
ev=>{
this.props.onNameChange（）；
}
}
/>
)
}
}
类应用程序扩展了React.Component{
状态={
人民:[{
年龄:36岁，
id:1，
姓名：“乔恩”
}, {
年龄:28，
id:2，
姓名：“鲍勃”
}],
}
onNameChange（）{
console.log（'onNameChange'）
}
onClickParent（）{
console.log（'onClickParent'）
}
render（）{
返回(
{
this.state.people.map（person=>{
返回(
)
})
}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
})();
我认为您应该停止在输入元素的
onClick
hander中的传播。这是否按预期工作


（函数（）{
类Person扩展React.Component{
render（）{
返回(
{this.props.name}:{this.props.age}
{
e、 停止传播（）
}}
聚焦={
ev=>{
this.props.onNameChange（）；
}
}
/>
)
}
}
类应用程序扩展了React.Component{
状态={
人民:[{
年龄:36岁，
id:1，
姓名：“乔恩”
}, {
年龄:28，
id:2，
姓名：“鲍勃”
}],
}
onNameChange（）{
console.log（'onNameChange'）
}
onClickParent（）{
console.log（'onClickParent'）
}
render（）{
返回(
{
this.state.people.map（person=>{
返回(
)
})
}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
})();
停止事件传播仅适用于同一事件。在您的情况下，单击
onClick
事件

您可以在
input
元素上添加一个新的
onClick
事件，并在那里停止传播：


（函数（）{
类Person扩展React.Component{
render（）{
返回(
{this.props.name}:{this.props.age}
e、 stopPropagation（）}
聚焦={
ev=>{
ev.preventDefault（）；
ev.stopPropagation（）；