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

Question

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

如何才能使<button> onClick在SocialPostList.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

Answer 1

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

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

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