Impossible d'écrire dans la barre de recherche MUI

Question

Je suis en mesure d'afficher une barre de recherche Material UI, mais je ne parviens pas à y saisir quoi que ce soit. Comment puis-je résoudre ce problème ?

J'ai essayé d'utiliser les extraits de code donnés comme réponses actuelles mais ils donnent des erreurs dans mon code existant.

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;

Answer 1

C'est parce qu'il vous manque l'état de votre composant SearchBar, vous devez garder un état pour la valeur d'entrée de SearchBar.

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

 />

Answer 2

Vous pouvez utiliser un hook et avoir la valeur à cet endroit, puis la mettre à jour lors des modifications apportées au champ.

 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
      }}
    />

Answer 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;