mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-21 05:19:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 用户选择组件直接输入用户名无法选中的bug

Browse Source
This commit is contained in:
wenbo.dong 2017-08-30 12:18:54 +08:00
parent e46f289f7a
commit 0203ef5cc6
2 changed files with 37 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/components/UsernameAutoComplete/UsernameAutoComplete.js
View File

@ -40,7 +40,8 @@ class UsernameAutoComplete extends Component {
this.state = {
dataSource: [],
uid: 0,
username: ''
username: '',
changeName: ''
}
}
@ -48,19 +49,23 @@ class UsernameAutoComplete extends Component {
callbackState: PropTypes.func
}
changeState = (uid, username) => {
// 设置本组件 state
this.setState({ uid, username });
// 回调 将当前选中的uid和username回调给父组件
this.props.callbackState({ uid, username });
}
onChange = (userName) => {
this.setState({
changeName: userName
});
}
onSelect = (userName) => {
this.state.dataSource.forEach((item) => {
if (item.username === userName) {
// 设置本组件 state
this.setState({
uid: item.id,
username: item.username
});
// 回调 将当前选中的uid和username回调给父组件
this.props.callbackState({
uid: item.id,
username: item.username
})
this.changeState(item.id, item.username);
}
});
}
@ -69,18 +74,34 @@ class UsernameAutoComplete extends Component {
const params = { q: value}
axios.get('/api/user/search', { params })
.then(data => {
const userList = []
data = data.data.data
const userList = [];
data = data.data.data;
if (data) {
data.forEach( v => userList.push({
username: v.username,
id: v.uid
}));
// 取回搜索值后，设置 dataSource
this.setState({
dataSource: userList
})
});
if (userList.length) {
userList.forEach((item) => {
if (item.username === this.state.changeName) {
// 每次取回搜索值后，没选择时默认选择第一位
this.changeState(userList[0].id, userList[0].username);
} else {
// 有候选词但没有对应输入框中的字符串，此时应清空候选 uid 和 username
this.changeState(-1, '');
}
});
} else {
// 如果没有搜索结果，则清空候选 uid 和 username
this.changeState(-1, '');
}
}
})
});
}
render () {
@ -88,6 +109,7 @@ class UsernameAutoComplete extends Component {
<AutoComplete
dataSource={this.state.dataSource.map(i => i.username)}
style={{ width: '100%' }}
onChange={this.onChange}
onSelect={this.onSelect}
onSearch={this.handleSearch}
placeholder="请输入用户名"

55
index.html
View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.test {
width: 400px;
position: relative;
min-height: 240px;
background-color: #2395f1;
overflow: hidden;
}
.test:before, .test:after {
content: "";
position: absolute;
left: 50%;
min-width: 800px;
min-height: 800px;
background-color: #fff;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.test:before {
bottom: 180px;
border-radius: 45%;
animation-duration: 10s;
}
.test:after {
top: 180px;
opacity: .5;
border-radius: 47%;
animation-duration: 10s;
}
@keyframes rotate {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
</html>