因此，我已在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()中的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
}
我已经尝试(function() {
var app = angular.module('snc', []);
app.controller('QueryController', function($scope, $http) {
$scope.query = {};
$scope.submit = function() {
console.log($scope.query);
$http({
method: "POST",
url: "", //php url
data: {
query
}
}).then(function mySuccess(response) {
console.log(response);
}, function myError(response) {
console.log(response);
});
};
});
})();和<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-app="snc" ng-controller="QueryController">
<b>Name: {{query.name}}</b><br/>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div> reviewForm is {{fromvalue.$valid}} </div>
<button type="submit" ng-click="submit()" class="btn btn-snc">Submit</button>
</form>但没有成功。文件如下，任何帮助将不胜感激!!!
SocialPostList.js
{{1}}
SocialPost.js
{{1}}
答案 0 :(得分：1)
嗯，我不认为这是React的事情。似乎模糊事件在onClick之前触发，因此后者无法阻止前者，并且我希望event.stopPropagation可以阻止事件从子级冒泡到父级，而不是相反。换句话说，我不知道如何阻止它。
公平地说，这种行为是可以预期的-单击其他位置会使您失去注意力。也就是说，here和其他地方提供了一种解决方案，您可以在鼠标按下时设置标志。然后，当发出模糊效果时，如果遇到“点击标记”，则可能无法产生效果，甚至可能重新聚焦。
如果您选择重新聚焦，则保存对按钮或输入的引用或查询选择它很简单（还不算太晚或类似的事情）。请注意，混合焦点和javascript时，为屏幕阅读器设置焦点陷阱或弄乱导航非常容易。