From 0203ef5cc60c0d0551bc2ed6e035d6ac6c6caa54 Mon Sep 17 00:00:00 2001 From: "wenbo.dong" Date: Wed, 30 Aug 2017 12:18:54 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=A8=E6=88=B7=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9B=B4=E6=8E=A5=E8=BE=93=E5=85=A5=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E5=90=8D=E6=97=A0=E6=B3=95=E9=80=89=E4=B8=AD=E7=9A=84?= =?UTF-8?q?bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UsernameAutoComplete.js | 52 +++++++++++++----- index.html | 55 ------------------- 2 files changed, 37 insertions(+), 70 deletions(-) delete mode 100644 index.html diff --git a/client/components/UsernameAutoComplete/UsernameAutoComplete.js b/client/components/UsernameAutoComplete/UsernameAutoComplete.js index ce0f4ed6..b5575647 100644 --- a/client/components/UsernameAutoComplete/UsernameAutoComplete.js +++ b/client/components/UsernameAutoComplete/UsernameAutoComplete.js @@ -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 { i.username)} style={{ width: '100%' }} + onChange={this.onChange} onSelect={this.onSelect} onSearch={this.handleSearch} placeholder="请输入用户名" diff --git a/index.html b/index.html deleted file mode 100644 index c42807ef..00000000 --- a/index.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - -
- -
- -