出于某种原因映射 onClick 事件后<li>不会工作</li>

Question

I'm trying to make a search field with a dropdown list.For some reason, after mapping over an array and making a list of a few "li" the onClick handler sends to suggestionSelected (value) function 3 values without even clicking on any of them!

I'm enclosing the screenshot depicting my attempts to enter the name of a city starting with "s". See the output in the console.

The piece of code in question is commented.

import React from 'react';
import shortid from 'shortid';
import modules from './CityForm.module.css';


export default class ToDoForm extends React.Component {
  state = {
    text: '',
    items: ["Moscow", "Saratov", "Singapore", "New York"],
    suggestions: []
  };

  handleChange = (event) => {
    this.setState({
      text: event.target.value
    });

    const value = event.target.value;
    let suggestions = [];
    if (value.length > 0) {
      const regex = new RegExp(`^${value}`, 'i');
      suggestions = this.state.items.sort().filter(v => regex.test(v));
    }
    this.setState({
      suggestions: suggestions
    });
  }

  renderSuggestions() {
    const { suggestions } = this.state;
    if (suggestions.length === 0) {
      return null;
    } else {
      return (
        <ul className={modules.dropdown_list}>
          {suggestions.map((item) => <li onClick={this.suggestionSelected(item)}> {item} </li>)}
        </ul>
      )
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.onSubmit({
      id: shortid.generate(),
      text: this.state.text
    });
    this.setState({
      text: ''
    });
  }

  suggestionSelected(value) {
    console.log(value);
    // this.setState({
    //  text: value,
    //  suggestions: []
    // });
  }

  render() {

    const { items } = this.state;

    return (

      <form
        className={modules.search_row}
        onSubmit={this.handleSubmit}>
        <div>
          <input
            autoComplete="off"
            className={modules.input}
            name={modules.text}
            value={this.state.text}
            onChange={this.handleChange}
            placeholder="E.g. Moscow..."
            onKeyUp={this.filterOptions}
          />
          {this.renderSuggestions()}
        </div>
        <button
          className={modules.addcity_btn}
          onClick={this.handleSubmit}>
          Add city
                </button>
      </form>

    )
  }
}

Answer 1

try change your image function call to

  { suggestions.map((item) => <li onClick={() => this.suggestionSelected(item)}> {item} </li> ) }

by passing it as onClick={this.suggestionSelected(item)} , it is actually calling the function this.suggestionSelected(item) when rendering

if you wish to pass something back as a parameter in a callback assignment itself, pass it as a function reference

onClick={() => this.suggestionSelected(item)}

Answer 2

Wrong: <li onClick={this.suggestionSelected(item)}>

Correct: <li onclick={(evt)=>this.suggestionSelected(item) }