Question

我正在尝试构建一个项目，以便让自己熟悉React和redux。我有一个来自Json（axios.get）的数据，其中包含数据和我建立表格的数据。

到目前为止一切顺利，因为数据显示在桌面上，但我会在页面顶部放置搜索输入，因此当用户尝试搜索特定国家/地区，资本，区域等表时应更新。所以我试图实现THIS

到目前为止我有以下代码

成分</ P>

import _ from 'lodash';
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { fetchCountries } from '../actions';
import SearchBar from './search_bar';


class FetchCountries extends Component {
constructor(props){
super(props);
this.state = {searchValue : ''}

}

componentDidMount(){
this.props.fetchCountries();
}

renderCountries() {

const { countries } = this.props;

return _.map(countries , country =>{

return (
<tr key={country.name.official}>
<td> {country.name.official} </td>
<td> {country.capital} </td>
<td> {country.region} </td>
<td> {country.subregion} </td>
</tr>
);

});

}

这是我想要实现的功能

handleSearchTerm(event) {
// this should return value in the table by comparing value in the table and user input

}

render() {
return(
<div>
<SearchBar onSearchTermChange= { this.handleSearchTerm }/>

<table className="table table-hover">
<thead className="thead-dark">
<tr>
<th scope="col">Countries</th>
<th scope="col">Capital</th>
<th scope="col">Region</th>
<th scope="col">SubRegion</th>
</tr>
</thead>
<tbody>
{this.renderCountries()}
</tbody>
</table>
</div>);

}
}

function mapStateToProps (state) {
return { countries: state.countries };
}


export default connect (mapStateToProps, { fetchCountries })(FetchCountries);

search_bar.js

import React, { Component } from 'react';

class SearchBar extends Component {

constructor(props){
super(props);
this.state = { term: ''}

this.handleChange = this.handleChange.bind(this); 

}
handleChange (term) {
this.setState({term});
this.props.onSearchTermChange(term);
}

render() {

return (<input value={this.state.term} onChange= {event => this.handleChange(event.target.value)}/>);

}
}
ras
export default SearchBar;

reducer.js

import _ from 'lodash';
import { FETCH_COUNTRIES } from '../actions';

export default function (state = {} , action) {
switch(action.type){
case FETCH_COUNTRIES:
return _.mapKeys(action.payload.data, 'name.official');


default:
return state;
}
}

任何帮助都会受到欢迎!!

Answer 1

你需要做两件事。

1-将搜索字词保存在FetchCountries容器状态

中

2-在renderCountries功能中使用过滤器，按搜索词过滤国家/地区

更新后的代码：

获取国家/地区容器

import _ from 'lodash';
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { fetchCountries  } from '../actions';
import SearchBar from './search_bar';


class FetchCountries extends Component {
    constructor(props){
        super(props);
        this.state = {searchValue : ''}
        this.renderCountries = this.renderCountries.bind(this)
        this.handleSearchTerm = this.handleSearchTerm.bind(this);
    }

    componentDidMount(){
        this.props.fetchCountries();
    }

    renderCountries() {
        const { countries } = this.props;
        var searchTerm = this.state.searchValue;
        var filteredCountries = _.filter( countries , country => {
            if(country.name.official.indexOf(searchTerm) > -1 || country.capital.indexOf(searchTerm) > -1 || country.region.indexOf(searchTerm) || country.subregion.indexOf(searchTerm) > -1 )
            {
                return country;
            }
        });

        return  _.map(filteredCountries , (country) => {
             return (
                        <tr key={country.name.official}>
                        <td> {country.name.official} </td>
                        <td> {country.capital} </td>
                        <td> {country.region} </td>
                        <td> {country.subregion} </td>
                        </tr>
                    );
         })
    }

    handleSearchTerm(term) {
        this.setState(searchValue : term);
    }

    render() {
    return(
            <div>
                <SearchBar onSearchTermChange= { this.handleSearchTerm }/>
                <table className="table table-hover">
                <thead className="thead-dark">
                <tr>
                <th scope="col">Countries</th>
                <th scope="col">Capital</th>
                <th scope="col">Region</th>
                <th scope="col">SubRegion</th>
                </tr>
                </thead>
                <tbody>
                {this.renderCountries()}
                </tbody>
                </table>
            </div>
        );
    }
}

function mapStateToProps (state) {
    return { countries: state.countries };
}
export default connect (mapStateToProps, { fetchCountries })(FetchCountries);

SearchBar组件

import React, { Component } from 'react';
class SearchBar extends Component {

    constructor(props) {
        super(props);
        this.state = { term: ''}
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange (term) {
        this.setState({ term });
        this.props.onSearchTermChange( term );
    }

    render() {
        return (<input value={this.state.term} onChange= {event => this.handleChange(event.target.value)}/>);
    }
}
export default SearchBar;

Answer 2

您还可以通过仅保存已过滤的数据状态并将其映射到渲染中来实现您的目标，并在任何更改中设置handleSearchTerm（）中的过滤器数据以获取更新的文件数据。

使用reactJS中的<input />搜索JSON数据

2 个答案: