javascript - 强制用户输入的字符串变成小写

Question

我正在使用 React 和 Javascript 我不确定在哪里添加函数。我的输入工作得很好——但我意识到我需要添加一个函数或能力来接受用户输入的任何内容并将字符串转换为小写格式。我试着把它放在输入字段中，但这只会强制用户输入的任何内容都以小写形式输入，所以它在那里不起作用。

const {useState} = React;

const SearchBar = (props) => {
  const [songSearch, setSongSearch, ] = useState("");

  function searchResults(event) {
    event.preventDefault();
    let response = props.songs.filter((song) => {
      if (song.album.includes(songSearch) || song.artist.includes(songSearch) || song.title.includes(songSearch) 
      || song.genre.includes(songSearch) || song.release_date.includes(songSearch)){ 
        return true;
      }
  });
    console.log(response)
    props.setSongs(response);
  }

  return (
    <div >
      <form onSubmit={searchResults}>
        <div>
          <input className="search-bar-input"
            type="text"
            value={songSearch}
            onChange={(e) => setSongSearch(e.target.value)}
            placeholder="Search by: Title, Artist, Album, Release Date and Genre"
          />{" "}
          <button className="submit-button" type="submit">Search</button>
        </div>  
      </form>
    </div>
  );
};

const fixedSongs = [...Array(10).keys()]
  .map(x => x+1)
  .map(id => ({
    album: `Album Num ${id}`,
    artist: `Artist Num ${id}`,
    title: `Title Num ${id}`,
    genre: `Genre Num ${id}`,
    release_date: `Release Date Num ${id}`
  }));

const Thingy = ({...props}) => {
  return (
    <div>
      <SearchBar songs={fixedSongs} setSongs={() => {}}/>
    </div>
  );
};

ReactDOM.render(
  <div>
    DEMO
    <Thingy />
  </div>,
  document.getElementById("rd")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="rd" />

Answer 1

const {useState} = React;

const SearchBar = (props) => {
  const [songSearch, setSongSearch] = useState("");

  function searchResults(event) {
    event.preventDefault();
    // obtain "lower-case" version of the user-input (songSearch)
    const lowerCaseSongSearch = songSearch.toLowerCase();
    // avoid listing every column to search by using below array
    const searchCols = ['album', 'artist', 'title', 'genre', 'release_date'];
    let response = props.songs.filter((song) => {
      // find if "songSearch"'s lower-case version exists in any 
      // of the 5 search-columns (ie, album, artist, etc)
      if (
        searchCols.some(          // if "some" element (album, artist, etc)
          k => song[k]            // has the lower-case version of "songSearch"
          .toLowerCase()          // matching the lower-case version of album, artist, etc
          .includes(lowerCaseSongSearch)
        )
      ) {                       // if lower-case matched, return "true"
        return true;
      }
  });
    console.log(response)
    props.setSongs(response);
  }

  return (
    <div >
      <form onSubmit={searchResults}>
        <div>
          <input className="search-bar-input"
            type="text"
            value={songSearch}
            onChange={(e) => setSongSearch(e.target.value)}
            placeholder="Search by: Title, Artist, Album, Release Date and Genre"
          />{" "}
          <button className="submit-button" type="submit">Search</button>
        </div>  
      </form>
    </div>
  );
};

const fixedSongs = [...Array(10).keys()]
  .map(x => x+1)
  .map(id => ({
    album: `Album Num ${id}`,
    artist: `Artist Num ${id}`,
    title: `Title Num ${id}`,
    genre: `Genre Num ${id}`,
    release_date: `Release Date Num ${id}`
  }));

const Thingy = ({...props}) => {
  return (
    <div>
      <SearchBar songs={fixedSongs} setSongs={() => {}}/>
    </div>
  );
};

ReactDOM.render(
  <div>
    DEMO
    <Thingy />
  </div>,
  document.getElementById("rd")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="rd" />