javascript - 由于某种原因，在将 onClick 事件映射到行不通

Question

我正在尝试使用下拉列表创建一个搜索字段。出于某种原因，在映射一个数组并制作几个“li”的列表之后，onClick 处理程序将 3 个值发送到建议选择（值）函数，甚至没有点击任何他们！

我附上了描述我尝试输入以“s”开头的城市名称的屏幕截图。查看控制台中的输出。

有问题的代码段已被注释。

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>

    )
  }
}

标签： javascriptreactjs

Answer 1

尝试将您的图像函数调用更改为

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

通过将其传递为onClick={this.suggestionSelected(item)}，它实际上是this.suggestionSelected(item)在渲染时调用该函数

如果您希望将某些内容作为回调赋值本身的参数传回，请将其作为函数引用传递

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