如何在 AppBar 中获取 autoComplete/TextField 关闭标题答案

【问题标题】：How to get autoComplete/TextField close title in AppBar如何在 AppBar 中获取 autoComplete/TextField 关闭标题
【发布时间】：2016-03-03 10:09:36
【问题描述】：

我想在 AppBar 中有一个搜索栏和登录按钮。搜索栏应该靠近他的标题。所以 AppBar 应该是这样的：

Title SearchBox         LoginButton

我该怎么办？这是代码：

import React from 'react'
import AppBar from 'material-ui/lib/app-bar'
import FlatButton from 'material-ui/lib/flat-button'
import BarAutoComplete from './auto-complete'

const styles={
  title:{
    cursor:'pointer',
  },

}

const AppBarExample=()=>(
     <AppBar       
      title={<span style={styles.title}>Title</span>}
      children={<div><BarAutoComplete/><FlatButton label="Search" /></div>}   

      iconElementRight={<FlatButton label="Login" />} 
       />

      )
export default AppBarExample

使用此代码，搜索栏位于登录按钮之后。这是similar question 谢谢

【问题讨论】：

标签： javascript reactjs ecmascript-6 material-ui

【解决方案1】：

那是因为AppBar是这样编码的，你可以在这里查看源代码：https://github.com/callemall/material-ui/blob/master/src/app-bar.jsx#L329-L332

因此，一个解决方案可能是反转您的元素并将您的搜索栏设置为iconElementRight，并将登录按钮设置为children，但遗憾的是名称和the code 建议iconElementRight 用于图标或仅平面按钮。其他的都行不通。

我认为你唯一能做的就是在 GitHub 上创建一个问题，要求他们改进 AppBar。

作为最后的一般建议，如果您在这种情况下没有这样做，那么当您问自己有关 material-ui 的一些问题时，请查看代码。与 material-ui 真正能做的相比，他们的在线文档有时会遗漏很多东西。

【讨论】：