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

【问题标题】：ReactJS - Stop button onClick from taking focus from <input>ReactJS - 停止按钮 onClick 从 <input> 获取焦点
【发布时间】：2017-10-24 19:19:19
【问题描述】：

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

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

我尝试过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

【问题讨论】：

在 .click 函数中返回 false 是另一种方法。使用e.preventDefault(); return false; 可能会起作用
我猜你可以有 .click(() => .focus) 文本字段，如果它只有一个
如果你能做到，你可以把它放在按钮 .click 函数中，并告诉它当它被选中时，选择之前选择的输入。
您无法停止触发模糊事件，但您可以在单击帖子时将焦点放回原处，正如@pfg 所述。
此时试图找出焦点元素为时已晚。您需要通过获取输入字段来提前计划以在获得焦点时保存 id。问题是，您需要为表单中的每个字段/对象执行此操作。也许你需要根据你能做什么而不是你想做什么来重新思考

标签： javascript html reactjs focus blur

【解决方案1】：

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

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

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

【讨论】：