时间戳

首页 > 解决方案 > 无法将输入数据从 react-autosuggest 传递到父文件

reactjs - 无法将输入数据从 react-autosuggest 传递到父文件

问题描述

Hye，我是 React 的新手，我尝试从 react-autosuggest 组件获取输入到父文件：

父组件搜索栏：

import React, { Component } from 'react';
import './Searchbar.css';
import SearchButtons from './buttons/SearchButtons';
import SearchInput from './input/AutoSuggestInput';

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      inputValue: '',
    };
  }

  getValue = (newValue) => {
    this.setState({ inputValue: newValue });
  }

  render() {
    return (
      <div className="searchBarItems">
        <SearchInput getValue={(event, value) => this.getValue(event, value)} />
        <SearchButtons />
      </div>
    );
  }
}

export default SearchBar;

具有自动建议功能的子组件 SearchInput：

import React, { Component } from 'react';
import './AutoSuggestInput.css';
import Autosuggest from 'react-autosuggest';
import cities from '../../../../assets/citiesDB/cities';

function escapeRegexCharacters(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function getSuggestions(value) {
  const escapedValue = escapeRegexCharacters(value.trim());

  if (escapedValue === '') {
    return [];
  }

  const regex = new RegExp(escapedValue, 'i');

  return cities.filter((city) => regex.test(city.name));
}

function getSuggestionValue(suggestion) {
  return (suggestion.name);
}

function renderSuggestion(suggestion) {
  return (
    <span>{suggestion.name}</span>
  );
}

class SearchInput extends Component {
  constructor() {
    super();

    this.state = {
      value: '',
      suggestions: [],
    };
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue,
    });
    this.props.getValue(event, newValue);
  };

  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value),
    });
  };

  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: [],
    });
  };

  render() {
    const { value, suggestions } = this.state;
    const inputProps = {
      placeholder: 'Saisir une ville',
      value,
      onChange: this.onChange,
    };

    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}

export default SearchInput;

我有两个问题：

src\components\homepage\searchBar\SearchBar.jsx 第 12:7 行：未使用状态字段：'inputValue' react/no-unused-state 第 17:21 行：未使用状态字段：'inputValue' react/no-unused-state

src\components\homepage\searchBar\input\AutoSuggestInput.jsx 第 46:5 行：必须使用解构道具分配 react/destructuring-assignment 第 46:16 行：道具验证中缺少“getValue”反应/道具类型

有人可以帮助我吗？我不明白为什么它没有被使用

标签： reactjs

解决方案

正如 React 所说，您的状态inputValue已设置，但您没有在任何地方或任何操作中使用它。inputValue您可以在使用状态时摆脱它。

比如放在组件的render()方法中SearchBar：

render() {
    return (
      <div className="searchBarItems">
        <SearchInput getValue={(event, value) => this.getValue(event, value)} />
        <SearchButtons />
        <p>Current input value: {this.state.inputValue}</p>
      </div>
    );
  }

第二个问题，它的 linting 错误，说你应该重组 props，你可以像下面这样摆脱它：


onChange = (event, { newValue }) => {
    this.setState({
      value: newValue,
    });
    const { getValue } = this.props;
    getValue(event, newValue);
  };

推荐阅读