reactjs - 将数据从类传递到类外的常量函数集
问题描述
我想根据<select>
. 我searchby
从类传递到<Autosuggest />
组件,它根据输入呈现建议。我首先要做的是能够searcby
访问getSuggestions
import React, { Component } from 'react';
import './Search.css'
import axios from 'axios';
import Autosuggest from 'react-autosuggest';
var books = []
const getSuggestions = ( value, searchby ) => {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
console.log(searchby)
return inputLength === 0 ? [] : books.filter(book =>
book.title.toLowerCase().slice(0, inputLength) === inputValue);
};
const getSuggestionValue = suggestion => suggestion.title;
const renderSuggestion = suggestion => (
<div>
{suggestion.title}
</div>
);
class Search extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
suggestions: [],
setOfAllBooks: [],
searchedBooks: [],
searchBy: ''
}
}
componentDidMount() {
axios.get('/api/book/viewAll')
.then(res => {
this.setState({ setOfAllBooks: res.data });
books = this.state.setOfAllBooks;
console.log(this.state.setOfAllBooks)
console.log(books);
})
this.setState({ searchBy: 'Title' });
}
changeSearchBy = (event) => {
this.setState({ searchBy: event.target.value })
}
onChange = (event, { newValue }) => {
this.setState({
value: newValue
});
};
onSuggestionsFetchRequested = ({ value }) => {
this.setState({
suggestions: getSuggestions(value)
});
};
onSuggestionsClearRequested = () => {
this.setState({
suggestions: []
});
}
searchBook = (event) => {
event.preventDefault();
this.setState({ value: this.state.value });
const searchedBooks = this.state.setOfAllBooks.filter(book => book.title === this.state.value);
this.props.setTableData(searchedBooks)
console.log(this.state.setOfAllBooks)
}
render() {
const { value, suggestions } = this.state;
const { searchby } = this.state.searchBy;
const inputProps = {
placeholder: 'Enter the name of the book',
value,
onChange: this.onChange,
className: "form-control",
type: "text",
searchby
}
return (
<div>
<form>
<fieldset>
<div className="form-group row d-flex justify-content-center">
<div className="form-group col-lg-4">
<label htmlFor="searchBy">Search By</label>
<select className="form-control" id="searchBy" onChange={this.changeSearchBy}>
<option>Title</option>
<option>ISBN</option>
<option>Author</option>
</select>
</div>
<div className="form-group col-lg-4">
<label htmlFor="searchFor">Search For</label>
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
id="searchFor"
searchby={searchby}
/>
</div>
<div className="form-group col-lg-2">
<label htmlFor="searchFor"> </label>
<button className="form-control btn btn-success" type="submit" onClick={this.searchBook}>Search</button>
</div>
</div>
</fieldset>
</form>
</div>
)
}
}
export default Search;
解决方案
看起来你正在存储searchBy
状态。所以你可以试试:
suggestions: getSuggestions(value, this.state.searchBy)
推荐阅读
- c++ - 将 .txt 文件读入 c++ 流,一些字符串由两个单独的单词组成
- google-bigquery - 将 bigquery 视图复制到另一个区域
- python - 优化循环,数据帧分区
- typescript - 用计数对数组中的元素进行分组
- mozilla-deepspeech - AttributeError:“NoneType”对象没有属性“impl”
- performance - 尾部延迟和吞吐量
- c# - 从 xml 加载对象,在动态 UI 中编辑值并保存回 xml
- abaqus - waitForCompletion(timeout) in Abaqus API does not actually kill the job after timeout passes
- azure - Enter commit message when saving Azure Data Factory to Git
- c# - Problems downloading web pages