Reactjs 过滤器功能导致所有元件在React中卸载
基本上我有一些数据,我想用单选按钮过滤。但是,选择任何一个收音机都会完全清除所有元素的DOM 选择某个特定值的按钮只会导致渲染具有该值作为其属性的对象 下面是我的代码:Reactjs 过滤器功能导致所有元件在React中卸载,reactjs,Reactjs,基本上我有一些数据,我想用单选按钮过滤。但是,选择任何一个收音机都会完全清除所有元素的DOM 选择某个特定值的按钮只会导致渲染具有该值作为其属性的对象 下面是我的代码: import React, { Component } from 'react'; import { Card, Select, Segment, Container, Divider, Grid, Header, Image } from 'semantic-ui-react'; import '../css/app.css'
import React, { Component } from 'react';
import { Card, Select, Segment, Container, Divider, Grid, Header, Image } from 'semantic-ui-react';
import '../css/app.css';
class FilterOptions extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
priority: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
var val = e.target.value;
this.setState({ priority: val });
this.props.changeOption(val);
}
render() {
return (
<div>
<ul>
<li>
<label>
<input type="radio" value="1" checked={this.state.priority === '1'} onChange={this.handleChange} />
1
</label>
</li>
<li>
<label>
<input type="radio" value="2" checked={this.state.priority === '2'} onChange={this.handleChange} />
2
</label>
</li>
<li>
<label>
<input type="radio" value="3" checked={this.state.priority === '3'} onChange={this.handleChange} />
3
</label>
</li>
<li>
<label>
<input type="radio" value="4" checked={this.state.priority === '4'} onChange={this.handleChange} />
4
</label>
</li>
</ul>
</div>
);
}
}
function FilterUsers(props) {
return (
<Container>
<br />
<br />
<Grid columns={3} doubling stackable>
{props.data.map((user /* leveraging arrow functions implicit return */) => (
<Grid.Column key={user.name}>
<Segment>
<Card>
<Card.Content>
<Card.Header>
<h2>name: {user.name}</h2>
</Card.Header>
<Card.Meta>
<span className="card__age">age: {user.age}</span>
</Card.Meta>
<Card.Description>priority: {user.priority}</Card.Description>
<Card.Description className="card__catergory">category: {user.category}</Card.Description>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
))}
</Grid>
</Container>
);
}
export default class SortAndFilterForm extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
priority: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(val) {
this.setState({ priority: val });
// var filteredByPriority = this.props.data.sort((a, b) => a.priority - b.priority);
var filteredByPriority = this.props.data.filter(function(item) {
return item.priority === val;
});
console.log('filteredByPriority', filteredByPriority);
this.setState({ data: filteredByPriority });
}
render() {
return (
<div>
<h1>Sorts</h1>
<FilterOptions data={this.state.data} changeOption={this.handleChange} />
<FilterUsers data={this.state.data} />
</div>
);
}
}
提前谢谢 val可以作为字符串传递,优先级的值可以作为Int传递,反之亦然
var filteredByPriority = this.props.data.filter(function(item) {
return item.priority === val;//change this to parseInt(item.priority) === parseInt(val)
});
希望这会有所帮助