ReactJS - 停止按钮单击从中<input>获取焦点

Question

所以我设置了一个文件来setState() onBlur并在SocialPost.js文件中onFocus。但是当我在SocialPostList.js（父级）中onClick一个<div>时，它激活了SocialPost.js文件中的parameterClicked()功能，SocialPost.js中的<input>变得模糊。

我如何使SocialPostList.js中的<button> onClick不会从SocialPost.js中的<input>中获取focus()？

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

社交邮政列表.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)

社交邮报.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

Answer 1

好吧，我不认为这是 React 的事情。模糊事件似乎在onClick之前触发，因此后者无法阻止前者，我希望event.stopPropagation能够阻止事件从子级到父级冒泡，而不是相反。换句话说，我不知道如何阻止它。

平心而论，这种行为是意料之中的 - 单击其他地方会让您失去焦点。也就是说，在这里和其他地方提供了一个解决方案，您可以在鼠标按下时设置一个标志。然后，当模糊闪光时，如果遇到"点击标志"，它可能会放弃产生效果，甚至可能重新聚焦。

如果您选择重新聚焦，保存对按钮或输入的引用或查询选择它是微不足道的（现在还不算太晚或类似的事情）。请注意，当您混合使用焦点和javascript时，很容易为屏幕阅读器设置焦点陷阱或弄乱导航。