gpt4 book ai didi

javascript - ReactJS - 停止按钮 onClick 从 <input> 获取焦点

转载 作者:行者123 更新时间:2023-12-03 14:27:44 25 4
gpt4 key购买 nike

所以我设置了一个文件 setState()对于 onBluronFocusSocialPost.js文件。但是当我 onClick一个<div>SocialPostList.js (父级)激活 parameterClicked() SocialPost.js 中的函数文件,<input>SocialPost.js变得模糊。

如何才能使<button> onClickSocialPostList.js不采用focus()来自<input>SocialPost.js

我已经尝试过e.preventDefault()e.stopPropagation()没有成功。文件如下,任何帮助将不胜感激!!!

SocialPostList.js

import React, { Component } from 'react'
import { graphql, gql } from 'react-apollo'
import SocialPost from './SocialPost'

class SocialPostList extends Component {
render() {
const PostListArray = () => {
return(
<div onClick={(e) => {e.preventDefault(); e.stopPropagation()}}>
{this.props.allParametersQuery.allParameters.map((parameter, index) => (
<div
key={index}
onClick={(e) => {e.preventDefault();e.stopPropagation();this.child.parameterClicked(parameter.param, parameter.id)}}
>{'{{' + parameter.param + '}}'}</div>
))}
</div>)
}
return (
<div>
...
<PostListArray />
{this.props.allSocialPostsQuery.allSocialPosts.map((socialPost, index) => (
<SocialPost
ref={instance => {this.child = instance}}
key={socialPost.id}
socialPost={socialPost}
index={index}
deleteSocialPost={this._handleDeleteSocialPost}
updateSocialPost={this._handleUpdateSocialPost}
allParametersQuery={this.props.allParametersQuery}/>
))}
...
</div>
)
}

}

const ALL_SOCIAL_POSTS_QUERY = gql`
query AllSocialPostsQuery {
allSocialPosts {
id
default
message
}}`

export default graphql(ALL_SOCIAL_POSTS_QUERY, {name: 'allSocialPostsQuery'})(SocialPostList)

SocialPost.js

import React, { Component } from 'react'
class SocialPost extends Component {
constructor(props) {
super(props)
this.state = {
message: this.props.socialPost.message,
focus: false
}
this._onBlur = this._onBlur.bind(this)
this._onFocus = this._onFocus.bind(this)
}
_onBlur() {
setTimeout(() => {
if (this.state.focus) {
this.setState({ focus: false });
}}, 0);
}
_onFocus() {
if (!this.state.focus) {
this.setState({ focus: true });
}
}
render() {
return (
<div className='socialpostbox mb1'>
<div className='flex'>
<input
onFocus={this._onFocus}
onBlur={this._onBlur}
type='text'
value={this.state.message}
onChange={(e) => { this.setState({ message: e.target.value})}}/>
</div>
</div>
)
}
parameterClicked = (parameterParam) =>{
if (!this.state.focus) return
let message = this.state.message
let newMessage = message.concat(' ' + parameterParam)
this.setState({ message: newMessage })
}

export default SocialPost

最佳答案

嗯,我不认为这是 React 的事情。看起来模糊事件在 onClick 之前触发,因此后者无法阻止前者,并且我希望 event.stopPropagation 阻止事件从子级冒泡到父级,而不是相反。换句话说,我不知道如何阻止它。

平心而论,这种行为是预料之中的——点击其他地方会让你失去焦点。也就是说,here 和其他地方提供了一个解决方案,您可以在鼠标按下时设置一个标志。然后,当模糊触发时,如果遇到“点击标志”,它可能会放弃产生效果,甚至可能会重新聚焦回来。

如果您选择重新聚焦,则保存对按钮或输入的引用或查询选择它很简单(还不算太晚或类似的事情)。请注意,当您混合焦点和 JavaScript 时,很容易设置焦点陷阱或搞乱屏幕阅读器的导航。

关于javascript - ReactJS - 停止按钮 onClick 从 &lt;input&gt; 获取焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46918415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com