焦点自动拼接时不要打开项目列表

时间:2017-01-17 08:09:09

标签: javascript reactjs material-ui

<AutoComplete
  fullWidth={true}
  name='claimTypeName'
  dataSourceConfig={{ text: 'name', value: 'id' }}
  dataSource={::this.getClaimTypesList()}
  onNewRequest={::this.onClaimTypeItemClick}
  openOnFocus={true}
/>

getClaimTypesList() {
  const { types } = this.props;

  return [
    { name: 'test 1', id: 80439850348504},
    { name: 'test 3', id: 435345345},
  ];

  return types.map(({ name, id }) => {
    return { name, id };
  });
}

但是当我点击(焦点)自动完成元素列表不显示时,出了什么问题?

如果我添加searchText

<AutoComplete
  fullWidth={true}
  name='claimTypeName'
  dataSourceConfig={{ text: 'name', value: 'id' }}
  dataSource={::this.getClaimTypesList()}
  onNewRequest={::this.onClaimTypeItemClick}
  onUpdateInput={::this.handleClaimTypeName}
  openOnFocus={true}
  searchText={this.state.claimTypeName ? this.state.claimTypeName : ' '}
/>

handleClaimTypeName(e) {
        const claimTypeName = e.target.value;

        this.setState({
            claimTypeName
        });
    }

如果我在键入任何列表前显示焦点,但如果我开始键入AutoComplete则不要搜索并出错

Uncaught TypeError: Cannot read property 'value' of undefined
    at WrappedComponent.handleClaimTypeName (ClaimCreate.js:146)
    at AutoComplete.<anonymous> (AutoComplete.js:209)
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:59)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:206)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:153)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at Object.flushBatchedUpdates (ReactUpdates.js:172)
    at ReactDefaultBatchingStrategyTransaction.closeAll (Transaction.js:206)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:153) 

0 个答案:

没有答案