javascript - 我需要把这个选择变成一个复选框

Question

我为此苦苦挣扎，我必须将选择表单更改为复选框表单我可以改变视觉效果，但复选框不像选择那样工作

这是选择

<div className="form-group">
<label forhtml="road-typeControlSelect">Flags</label>
<select name="flags" value={flags}  onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
    <option value={0}>All</option>
    <option value={1}>Tunnel</option>
    <option value={16}>Unpaved</option>
    <option value={32}>Headlights required</option>
    <option value={128}>Next to carpool/HOV/bus lane</option>
</select>

这就是我到目前为止所做的复选框

                <div name="flags" value={flags}  onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
                        <label forhtml="road-typeControlSelect">Flags</label>
                        <div className="form-group form-check">
                            <input value={0} type="checkbox" name="All"  onChange={this.handleInputChange} className="form-check-input" />
                            <label className="form-check-label">All</label>
                        </div>  
                        <div className="form-group form-check">
                            <input value={1} type="checkbox" name="Tunnel" onChange={this.handleInputChange} className="form-check-input"/>
                            <label className="form-check-label">Tunnel</label>
                        </div>
                        <div className="form-group form-check">
                            <input value={16} type="checkbox" name="Unpaved"  onChange={this.handleInputChange} className="form-check-input" />
                            <label className="form-check-label">Unpaved</label>
                        </div>
                        <div className="form-group form-check">
                            <input value={32} type="checkbox" name="Headlights required"   onChange={this.handleInputChange} className="form-check-input"/>
                            <label className="form-check-label">Headlights required</label>
                        </div>
                        <div className="form-group form-check">
                            <input value={128} type="checkbox" name="Next to carpool/HOV/bus lane"  onChange={this.handleInputChange} className="form-check-input"/>
                            <label className="form-check-label">Next to carpool/HOV/bus lane</label>
                        </div>
                    </div>

这是我的处理方法

    handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
        filterObj:{...this.state.filterObj,...{[name]: value}}
    });
}

我会很感激关于这个主题的帮助。我正在使用 reactjs 但这似乎是更纯粹的 javascript 问题

Answer 1

这个常规问题所以我决定制作两个示例来处理多个复选框和一个复选框 'radio inputs'

No need to put onChange for each input as you are defined an onChange for the parent div

多个复选框

   <div name="flags" onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
      <label forhtml="road-typeControlSelect">Flags</label>
      <div className="form-group form-check">
        <input value={0} type="checkbox" name="flags" className="form-check-input" />
        <label className="form-check-label">All</label>
      </div>
      <div className="form-group form-check">
        <input value={1} type="checkbox" name="flags"  className="form-check-input" />
        <label className="form-check-label">Tunnel</label>
      </div>
      <div className="form-group form-check">
        <input value={16} type="checkbox" name="flags" className="form-check-input" />
        <label className="form-check-label">Unpaved</label>
      </div>
      <div className="form-group form-check">
        <input value={32} type="checkbox" name="flags"  className="form-check-input" />
        <label className="form-check-label">Headlights required</label>
      </div>
      <div className="form-group form-check">
        <input value={128} type="checkbox" name="flags"  className="form-check-input" />
        <label className="form-check-label">Next to carpool/HOV/bus lane</label>
      </div>
    </div>

然后在handleInputChange函数中，检查输入值是否存在则删除，不存在则添加

  handleInputChange = (e) => {
    let checkedBox = e.target.value;
    if(this.state.flages.indexOf(checkedBox) !== -1){
      console.log(checkedBox, 'deleted!')
      this.setState(prevState=> ({
        flages: prevState.flages.filter(d => d !== checkedBox)
      })) // deleting the value from array if exist
    }else{
      this.setState(prevState => ({ flages: [...prevState.flages, checkedBox] }));
    }
  }

信号复选框

Change checkbox to radio of input type

All the input name attribute should be the same

<div name="flags" onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
  <label forhtml="road-typeControlSelect">Flags</label>
  <div className="form-group form-check">
    <input value={0} type="radio" name="flags" className="form-check-input" />
    <label className="form-check-label">All</label>
  </div>
  <div className="form-group form-check">
    <input value={1} type="radio" name="flags"  className="form-check-input" />
    <label className="form-check-label">Tunnel</label>
  </div>
  <div className="form-group form-check">
    <input value={16} type="radio" name="flags" className="form-check-input" />
    <label className="form-check-label">Unpaved</label>
  </div>
  <div className="form-group form-check">
    <input value={32} type="radio" name="flags"  className="form-check-input" />
    <label className="form-check-label">Headlights required</label>
  </div>
  <div className="form-group form-check">
    <input value={128} type="radio" name="flags"  className="form-check-input" />
    <label className="form-check-label">Next to carpool/HOV/bus lane</label>
  </div>
</div>

在handleInputChange函数中

  handleInputChange = (e) => {
    let checkedBox = e.target.value;
    this.setState({ flages: checkedBox})
  }