Javascript ReactJS-单击停止按钮以从<；获取焦点；输入>；

因此，我在

SocialPost.js

文件中为

onBlur

和

onFocus

设置了一个文件

setState（）

。但是，当我在

SocialPostList.js

（父项）中单击

a
，激活
SocialPost.js
文件中的
parameterClicked（）
函数时，
SocialPost.js
中的
会变得模糊

如何使
SocialPostList.js中的
onClick
不会从
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)

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

import React，{Component}来自“React”
从'react apollo'导入{graphql，gql}
从“/SocialPost”导入SocialPost
类SocialPostList扩展了组件{
render（）{
常量PostListArray=（）=>{
返回(
{e.preventDefault（）；e.stopPropagation（）}>
{this.props.allParametersQuery.allParameters.map（（参数，索引）=>(
{e.preventDefault（）；e.StopperPropagation（）；this.child.parameterClicked（parameter.param，parameter.id）}
>{{{{}+parameter.param+}}
))}
)
}
返回(
...
{this.props.allSocialPostsQuery.allSocialPosts.map（（socialPost，index）=>(
{this.child=instance}
key={socialPost.id}
socialPost={socialPost}
索引={index}
deleteSocialPost={this.\u handleDeleteSocialPost}
updateSocialPost={this.\u handleUpdateSocialPost}
allParametersQuery={this.props.allParametersQuery}/>
))}
...
)
}
}
const ALL_SOCIAL_POSTS_QUERY=gql`
查询所有社会职位{
所有社交网站{
身份证件
违约
消息
}}`
导出默认图形ql（所有社交帖子查询，{name:'allSocialPostsQuery'}）（社交帖子列表）

SocialPost.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)

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

import React，{Component}来自“React”
类SocialPost扩展组件{
建造师（道具）{
超级（道具）
此.state={
消息：this.props.socialPost.message，
焦点：错误
}
this.\u onBlur=this.\u onBlur.bind（this）
this.\u onFocus=this.\u onFocus.bind（this）
}
_onBlur（）{
设置超时（（）=>{
if（this.state.focus）{
this.setState（{focus:false}）；
}}, 0);
}
_onFocus（）{
如果（！this.state.focus）{
this.setState（{focus:true}）；
}
}
render（）{
返回(
{this.setState（{message:e.target.value}}}}/>
)
}
parameterClicked=（parameterParam）=>{
如果（！this.state.focus）返回
让消息=this.state.message
让newMessage=message.concat（“”+parameterParam）
this.setState（{message:newMessage}）
}
导出默认SocialPost
好吧，我认为这不是一件好事。模糊事件似乎是在onClick之前触发的，因此后者无法阻止前者，我希望event.stopPropagation能够阻止事件从子级冒泡到父级，而不是相反。换句话说，我不知道如何阻止它

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

如果您选择重新聚焦，那么保存对按钮或输入的引用，或者查询选择按钮或输入（还不算太晚或诸如此类）。只是要小心，当您混合使用focus和javascript时，设置焦点陷阱或扰乱屏幕阅读器的导航太容易了。
在.click函数中返回false是另一种方法。使用
e.preventDefault（）；返回false可能工作我猜你可能有。单击（（）=>.focus）文本字段如果它是唯一的如果你可以这样做，你会把它放在按钮中。单击函数并告诉它，当它被选中时，选择以前选择的输入。你不能停止触发模糊事件，但你可以在单击post时将焦点放回原处，正如@pfg所提到的，试图在那一点上找出重点元素已经太迟了。您需要提前计划，让输入字段在id被聚焦时保存id。问题是，对于表单中的每个字段/对象，都需要这样做。也许你需要重新考虑你能做什么，而不是你想做什么