如何在应用栏中获取自动完成/文本字段关闭标题

How to get autoComplete/TextField close title in AppBar

本文关键字：文本 字段 标题 应用 获取      更新时间：2023-09-26

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

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

使用此代码，搜索栏位于登录按钮之后。这是一个类似的问题谢谢

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

因此，解决方案可能是反转您的元素并将搜索栏设置为iconElementRight，将登录按钮设置为children，但遗憾的是，名称和代码表明iconElementRight仅适用于图标或平面按钮。其他任何事情都行不通。

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

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

相关文章：