无法在 MUI 搜索栏中写入答案

【问题标题】：Unable to Write in MUI SearchBar无法在 MUI 搜索栏中写入
【发布时间】：2020-05-20 07:52:36
【问题描述】：

我可以显示 Material UI 搜索栏，但我无法在其中输入任何内容。我怎样才能解决这个问题？

我尝试使用作为当前答案给出的代码 sn-ps，但它们在我现有的代码中给出了错误。

import React, { Component, useState } from 'react'
import SearchBar from 'material-ui-search-bar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import PermanentDrawerLeft from '../../components/drawer/drawer';


const userSearchPage = () => (
<div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <MuiThemeProvider>
            <DropDownMenu >
            <MenuItem style={ {fontSize: "20px" } } primaryText="Search By"/>
            <MenuItem value={1} style={ {fontSize: "20px" } } primaryText="First Name" />
            <MenuItem value={1} style={ {fontSize: "20px" } } primaryText="Last Name" />
            </DropDownMenu>
            </MuiThemeProvider>
            <SearchBar
      onChange={() => console.log('onChange')}
      onRequestSearch={() => console.log('onRequestSearch')}
      style={{
        margin: '0 auto',
        maxWidth: 800
      }}
    />
            </div>
    );

export default userSearchPage;

【问题讨论】：

reactjs.org/docs/forms.html#controlled-components

标签： javascript html reactjs material-ui

【解决方案1】：

那是因为您缺少 SearchBar 组件的状态，您需要为 searchBar 输入值保留一个状态。

<SearchBar
value={this.state.value}
onChange={(newValue) => this.setState({ value: newValue })}
onRequestSearch={() => console.log('onRequestSearch')}
  style={{
    margin: '0 auto',
    maxWidth: 800
  }

 />

【讨论】：

请查看我更新的完整代码。如果我尝试用你的 sn-p 替换我的代码，我会收到多个错误。例如，在 this.state.value，我得到 The containing arrow function captures the global value of 'this'.

【解决方案2】：

您可以使用hook 并在其中获取值，然后根据对字段所做的更改对其进行更新。

 import React, { useState } from 'react'
 ...
 const [text, setText] = useState("");
 ...
 <SearchBar
      onChange={e => setText(e.target.value)}
      value={text}
      onRequestSearch={() => console.log('onRequestSearch')}
      style={{
        margin: '0 auto',
        maxWidth: 800
      }}
    />

【讨论】：

你能看看我更新的qs吗？您的代码 sn-p 在我的代码中出现错误 useState can only be used in a function
那是因为你可能在基于类的组件中使用了钩子。钩子只能在功能组件中使用。供参考：reactjs.org/docs/hooks-intro.html 我添加了另一个代码 sn-p 它使用 react useState 钩子来管理搜索栏的状态。

【解决方案3】：

import React, { useState } from "react";
import SearchBar from "material-ui-search-bar";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import DropDownMenu from "material-ui/DropDownMenu";
import MenuItem from "material-ui/MenuItem";
import PermanentDrawerLeft from "../../components/drawer/drawer";

const userSearchPage = () => {
  const [text, setText] = useState("");

  return (
    <div>
      <PermanentDrawerLeft />
      <MuiThemeProvider>
        <DropDownMenu>
          <MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
          <MenuItem
            value={1}
            style={{ fontSize: "20px" }}
            primaryText="First Name"
          />
          <MenuItem
            value={1}
            style={{ fontSize: "20px" }}
            primaryText="Last Name"
          />
        </DropDownMenu>
      </MuiThemeProvider>
      <SearchBar
        value={text}
        onChange={value => {
          setText(value);
          console.log("onChange");
        }}
        onRequestSearch={() => console.log("onRequestSearch")}
        style={{
          margin: "0 auto",
          maxWidth: 800
        }}
      />
    </div>
  );
};

export default userSearchPage;

【讨论】：