ReactJS-停止按钮onClick从

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()没有成功。文件在下面，任何帮助将不胜感激！！

SocialPostList.js

e.stopPropagation()

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)

Answer 1

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

公平地说，这种行为是可以预期的-单击其他位置会使您失去注意力。也就是说，

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

和其他地方提供了一种解决方案，您可以在鼠标按下时设置标记。然后，当发出模糊效果时，如果遇到“点击标记”，则可能无法产生效果，甚至可能重新聚焦。

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