下面的代码用于获取选定的值（如搜索优化/搜索）。例如，如果我点击政治复选框，我应该得到政治价值如果我点击电影复选框，我应该得到电影价值和政治价值如果我取消选中它应该只显示选定的复选框值。下面是我写的代码
class Refinments extends Component {
render(){
const { handleChange,handleClick } = this.props;
return(
<Form>
{['checkbox'].map(type => (
<div key={`Political`} className="mb-1">
<Form.Check
type={type}
custom
id={`Political}`}
label={`Political`}
value={`Political`}
onChange={handleChange.bind(this, "Political")}
/>
</div>
))}
{['checkbox'].map(type => (
<div key={`movies`} className="mb-1">
<Form.Check
type={type} custom
id={`movies}`}
label={`Movies`}
value={`Movies`}
onChange={handleChange.bind(this, "Movies")}
/>
</div>
))}
</Form>
)}
export default Refinments;
最好的选择是将选定的值存储在状态变量中。handleChange方法检查更改的复选框值是否在 中valArr，如果存在，则从数组中删除该值并用新数组替换状态变量，如果不存在，则简单地将该值推送到数组中。
因此this.state.valArr将始终且仅具有选定的复选框值。
constructor(props) {
super(props);
this.state = {
valArr: []
}
}
handleChange = (val) => {
let { valArr } = this.state;
let index = valArr.indexOf(val);
if (index != -1)
valArr.splice(index, 1);
else
valArr.push(val);
this.setState({ valArr });
}
render() {
.
.
.
<div key={`movies`} className="mb-1">
<Form.Check
type={type} custom
id={`movies}`}
label={`Movies`}
value={`Movies`}
onChange={this.handleChange}
/>
</div>
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句