React - 顯示/隱藏來自不同復選框的多個 div

Question

我是 React 新手，我在 JS 中有一定的領域，我想這是一個簡單的問題，但我已經搜索了 2 個小時，但沒有找到滿意的答案:(

我有復選框：

<Col md="4">
  <FormGroup>
    <Label>Have Children</Label>
    <CustomInput type="radio" name="customRadio" label="Yes" value="yes" />
    <CustomInput type="radio" name="customRadio" label="No" value="no" />
  </FormGroup>
</Col>
<Col md="4">
  <FormGroup>
    <Label>Have Spouse</Label>
    ...(same as children input)
  </FormGroup>
</Col>
<Col md="4">
  <FormGroup>
    <Label>Have Family Members</Label>
    ...(same as children input)
  </FormGroup>
</Col>

如果您單擊“有孩子”，我希望顯示一些與孩子相關的 div。 如果沒有，它們應該被隱藏。 其他選項也是如此。

我想知道什么是最干凈的方法來做到這一點。

Answer 1

復選框應該在狀態中切換一個布爾值。

然后，如果 state 中的值為 true，則有條件地呈現子項。

因此，將選中的值和更改處理程序附加到您的組：

      <FormGroup>
        <Label>Have Children</Label>
        <CustomInput type="radio" name="customRadio" label="Yes" value="yes" onChange={() => this.handleChange} checked={this.state.visibility} />
        <CustomInput type="radio" name="customRadio" label="No" value="no" onChange={() => this.handleChange} checked={!this.state.visibility}/>
      </FormGroup>

在您的類中創建狀態值並使用 handleChange 方法切換它

state = {visibility: false}

handleChange = () => this.setState({visibility: !this.state.visibility})

然后你可以根據可見性布爾值有條件地渲染你的東西，所以......

<div>{this.state.visibility && <p>Now You see me</p>}</div>

Answer 2

只需事先考慮數據結構。

從你的問題來看，我假設你只是想要這樣的東西：

1. 如果children復選框被選中，顯示與children相關的元素
2. 如果spouse復選框被選中，顯示與spouse相關的元素。
3. 等等。

在我看來，您需要一組帶有每個狀態（選中或未選中）的復選框。 您可以將此信息存儲在組件狀態中。

// in the constructor
this.state = {
  checkboxes: [
    { id: 1, label: 'children', checked: false },
    { id: 2, label: 'spouse', checked: false },
  ],
}

然后，在你的render()函數中，你只需要像這樣循環遍歷數組：

const { checkboxes } = this.state;

return (
  <div>
    {checkboxes.map((checkbox, index) => (
      <div>
        <label>{checkbox.label}</label>
        <input type="checkbox" checked={checkbox.checked} onClick={() => this.toggleCheckBox(index)} />
        {checkbox.checked && <div>show this if the checkbox is checked</div>}
      </div>
    ))}
  </div>
);

只記得在類中實現this.toggleCheckBox方法。 如果您不確定如何操作，這里有一個代碼和框供您查看。