ReactJS - AppBar中的自動完成材料UI

Question

我正在學習ReactJS，並且我構建了一個AppBar並在其中添加了一個TextField。它工作完美。下面是我的代碼：

class Test extends React.Component { 
render() { 
    return (
    <MuiThemeProvider> 
     <AppBar 
     title={"Benchmarking"} 
     iconElementLeft={<IconButton iconClassName="muidocs-icon-custom-github" />} 
     iconElementRight={ 
      <div> 
      <TextField 
       hintText='this is a sample text' 
      /> 
      </div> 
     } 
     /> 

     </MuiThemeProvider> 
    ) 
    } 
} 

現在我想的地方添加AutoField的TextField，其不扔任何錯誤，但AppBar不顯示。可能是什麼問題？請幫助。

Answer 1

和AutoComplete需要dataSource和onUpdateInput道具，所以你必須提供。做這樣的事情

state = { 
    dataSource: [], 
    }; 

    handleUpdateInput = (value) => { 
    this.setState({ 
     dataSource: [ 
     value, 
     value + value, 
     value + value + value, 
     ], 
    }); 
    }; 

然後將它們作爲道具在AutoComplete

<AutoComplete 
      hintText="Type anything" 
      dataSource={this.state.dataSource} 
      onUpdateInput={this.handleUpdateInput} 
     /> 

這裏是Material-UI鏈接到AutoComplete頁面 - http://www.material-ui.com/#/components/auto-complete