隐藏单选按钮选择的输入字段

Question

我希望在选择了一个单选按钮后，只隐藏一个输入字段，而与另一个单选按钮/输入组无关。默认情况下，将显示输入字段，但是一旦选择了单选按钮（标签为“ None”），则不应显示该输入字段，然后当用户移至下一组单选按钮和输入字段，它们应该能够执行相同的操作。现在，我的if / else语句将其弄乱了，并导致在第二组中选择单选按钮时，第一个输入字段消失了。

我试图通过CSS来做到这一点，并且确实起作用了，但是我正在寻找针对涉及状态等的React解决方案。

这是我到目前为止的内容：

  constructor(props) {
    super(props);
            this.handleNoneStates = this.handleNoneStates.bind(this);
   }

   handleNoneStates(event) {
      this.setState({
       id: event.target.id
    });
   }
  render() {
      if (this.state.id === 'includestate' || this.state.id === 'excludestate') {
          var showStates = <MultiSelectAllStates/>
    }
     else {
      }
    if (this.state.id === 'includezipcode' || this.state.id ==='excludezipcode') {
          var showZipCode = <ZipCodeSelect/>
     }
        else{}
    return (
            <FormGroup row>
                <Col lg="6"> 
                <Label className="requirements">States</Label>                    
                <FormGroup check inline>
                    <Input className="form-check-input" type="radio" id="includestate" name="stateRadio"  value={this.state.id} onChange={this.handleNoneStates}/>
                    <Label className="form-check-label" check htmlFor="includestate">Include</Label>
                  </FormGroup>
                  <FormGroup check inline>
                    <Input className="form-check-input" type="radio" id="excludestate" name="stateRadio" value="exclude" value={this.state.id} onChange={this.handleNoneStates} />
                    <Label className="form-check-label" check htmlFor="excludestate">Exclude</Label>
                  </FormGroup>
                  <FormGroup check inline>
                    <Input className="form-check-input" type="radio" id="yesCheck" name="stateRadio" value="none" value={this.state.id} onChange={this.handleNoneStates}/>
                    <Label className="form-check-label" check htmlFor="excludestate">None</Label>
                  </FormGroup>
                </Col>
            </FormGroup>
            <Row>
                <Col lg="12">
                  {showStates}
                </Col>
            </Row>
            <FormGroup row>
                <Col lg="6">
                    <Label className="requirements">Zip Code</Label>
                    <FormGroup check inline>
                    <Input className="form-check-input" type="radio" id="includezipcode" name="zipRadio" value={this.state.id} onChange={this.handleNoneStates}/>
                    <Label className="form-check-label" check htmlFor="zipCodeInclude">Include</Label>
                  </FormGroup>
                  <FormGroup check inline>
                    <Input className="form-check-input" type="radio" id="excludezipcode" name="zipRadio" value={this.state.id} onChange={this.handleNoneStates}/>
                    <Label className="form-check-label" check htmlFor="excludezipcode">Exclude</Label>
                  </FormGroup>
                  <FormGroup check inline>
                    <Input className="form-check-input" type="radio" id="noneZipCode" name="zipRadio" value={this.state.id} onChange={this.handleNoneStates}/>
                    <Label className="form-check-label" check htmlFor="noneZipCode">None</Label>
                  </FormGroup>
                </Col>
            </FormGroup>
             <Row>
              <Col lg="12">
                {showZipCode}
              </Col>
            </Row>

我正在尝试使两个表单组彼此独立地工作。因此，如果用户决定包括其中一个组，则不会发生任何事情。然后，如果他们决定为第二组选择“无”，则只有该组将隐藏输入字段。

谢谢。