Question

下面的代码用于获取选定的值（如搜索细化/搜索）。例如，如果我单击“政治”复选框，则应该获得政治价值如果我单击MovieCheckbox，则应该获得MovieValue和政治价值如果我取消选中，它应该仅显示选定的复选框值。下面是我编写的代码

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;

Answer 1

最好的选择是将所选值存储在状态变量中。 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>
}

选中多个复选框后，将ReactJs与BootstrapUI一起使用可获取所有值

1 个答案: