React, Keep getting Cannot read property 'value' of undefined on Search Input

Question

Im trying to integrate the < ChipInput /> component from https://github.com/TeamWertarbyte/material-ui-chip-input I'm using material-UI react component and so far what I have is:

A search input bar. When I type an artist it returns a result. so basically is working.

Now, when I try to implement < ChipInput /> , following the instructions I get no results. (note IconButton and TextField are commented out as in Im trying to replace them with ChipInput)

Therefore, if I type "aerosmith" I'll get:

FETCH_URL https://itunes.apple.com/search?term=&limit=4 instead of

FETCH_URL https://itunes.apple.com/search?term=aerosmith&limit=4

so , it's like is not taking my setState query for a reason. I tried componentWillReceiveProps but it didnt help. Any suggestions ?

exports

EDIT:

By the way, if I uncomment from < IconButton /> (line 110) til the end of < TextField /> (line 133) it does exactly what I want , but no chips ( with no ChipInput of course)

Answer 1

你不需要defaultValue只需4件事（如果你想要自动完成）searchText，dataSource，onUpdateInput和Onchange。

材质UI自动完成和芯片属性类似，因此将它们应用于ChipInput，它们几乎相同。

最重要的是你必须为chipEput在searchText中使用的每个属性编写一个函数，它实际上可以是一个字符串。正如您所看到的，使用硬编码值可能很容易使用ChipInput，但是当您开始点击APIS时，它就不那么容易了。了解onUpdateInput的作用非常重要

此外，你应该绑定你在构造函数中编写的每个函数，这是一个确保性能的反应模式，在书上找到它。

constructor(props) {
  super (props) 
    this.onUpdateInput = this.onUpdateInput.bind(this);
    this.onNewRequest = this.onNewRequest.bind(this);
}

然后在渲染方法

上

   <ChipInput
      searchText={this.state.query}
      fullWidth={true}
      dataSource={this.state.dataSource}
      onUpdateInput={this.onUpdateInput}
      onChange={this.onNewRequest}

    />