Question

我正在尝试将onChange事件侦听器传递给一组复选框。但是，一旦我单击一个复选框，所有内容都将被单击，并且我设置的条件内联样式将全部应用。

这是JSX代码

class PizzaBuilder extends Component {
  state={
    checked: false
  }
 handleCheckClick = ()=>{
    this.setState({checked: !this.state.checked})
  }
render(){
return (
 <div>
                       <img style={{display: this.state.checked?"block":null, position:'absolute', zIndex: '300', height: '400px', width: '400px', top:'375px', left: '130px'}} src={Pepperoni} alt="pepperoni"/>
                     </div>
                     <div>
                       <img  style={{display: this.state.checked?"block":null, position:'absolute', zIndex: '300', height: '400px', width: '400px', top:'375px', left: '130px'}}src={Sausage} alt="sausage"/>
                     </div>
                     <div>
                       <img style={{display: this.state.checked?"block":null, position:'absolute', zIndex: '300', height: '400px', width: '400px', top:'375px', left: '130px'}} src={Pineapple} alt="pineapple"/>
                     </div>
                     <div>
                       <img style={{display: this.state.checked?"block":null, position:'absolute', zIndex: '300', height: '400px', width: '400px', top:'375px', left: '130px'}} src={Peppers} alt="peppers"/>
                     </div>

<div>
                       <input type="checkbox" name="pepperoni"  id="pepperoni" value = "pepperoni"
                       onChange={this.handleCheckClick}
                       checked={this.state.checked}
                       />
                       <label for="pepperoni">Pepperoni</label>
                      </div>
                      <div>
                       <input type="checkbox" name ="sausage" id="sausage" value="sausage"
                        onChange={this.handleCheckClick}
                        checked={this.state.checked}
                      />
                       <label for = "sausage">Sausage</label>
                      </div>
                      <div>
                       <input type="checkbox" name ="pineapple" id="pineapple" value="pineapple"
                       onChange={this.handleCheckClick}
                       checked={this.state.checked}
                       />
                       <label for = "pineapple">Pineapple</label>
                      </div>
)
}

}

Answer 1

1-假设您有3个复选框：

使用数组检查状态中的值：

class PizzaBuilder extends Component {
  state={
    checked: [false,false,false]
  }
}
...

2-更改输入事件并检查值，如下所示：

             <input type="checkbox" name ="sausage" id="sausage" value="sausage"
                onChange={this.makeClickHandler(0)}
                checked={this.state.checked[0]}
              />
             <input type="checkbox" name ="sausage" id="sausage" value="sausage"
                onChange={this.makeClickHandler(1)}
                checked={this.state.checked[1]}
              />
             <input type="checkbox" name ="sausage" id="sausage" value="sausage"
                onChange={this.makeClickHandler(2)}
                checked={this.state.checked[2]}
              />

注意输入中使用的索引

3-更改事件处理程序以更改当前状态：

 makeClickHandler = idx => () => {
    this.setState(({checked} => {
      const current = [...checked];
      current[idx] = !current[idx];
      return {checked: current};
  }
}

Answer 2

您需要存储每个复选框的状态。

当前，您只有布尔型state.checked，它是对还是对，因此它们都可以切换。

您可以为它们中的每一个设置单独的状态，也可以设置一系列布尔值。然后，可以从各个handleCheckXClick函数或在一个大函数中更新该数组（或单独的状态），必须将其传递一个参数来确定要切换的检查状态。

条件样式可以使用单个状态或数组，只需确保引用正确的索引即可。

Answer 3

类似Kingofday的建议。

class PizzaBuilder extends Component {
  state = {
    checked: {}
  };
  handleCheckClick = (e) => {
    let map = {...this.state.checked};
    map[e.target.name] = map[e.target.name] ? !map[e.target.name] : true
    this.setState({checked: map});
  };

  render() {
    return (
      <div>
        .....

        <div>
          <input type="checkbox" name="pepperoni" id="pepperoni" value="pepperoni"
                 onChange={(e) => this.handleCheckClick(e)}
                 checked={this.state.checked['pepperoni']}
          />
          <label for="pepperoni">Pepperoni</label>
        </div>
        <div>
          <input type="checkbox" name="sausage" id="sausage" value="sausage"
                 onChange={(e) => this.handleCheckClick(e)}
                 checked={this.state.checked['sausage']}
          />
          <label for="sausage">Sausage</label>
        </div>
        <div>
          <input type="checkbox" name="pineapple" id="pineapple" value="pineapple"
                 onChange={(e) => this.handleCheckClick(e)}
                 checked={this.state.checked['pineapple']}
          />
          <label for="pineapple">Pineapple</label>
        </div>
      </div>
    );
  }

}

这将自动为您创建状态图，您可以添加尽可能多的命名复选框。

Answer 4

您不能仅用一种状态来做到这一点，您需要为每个这样的人定义状态

import React, { Component } from 'react';

export default class test extends Component {
  state = {
    Pepperoni: false,
    Sausage: false,
    Pineapple: false,
    Peppers: false,
  };

  handleCheckClick = (e) => {
    const target = e.target.value;
    this.setState((prevState) => ({ [target]: !prevState[target] }));
  };

  render() {
    return (
      <div>
        <div>
          <img
            style={{
              display: this.state.Pepperoni ? 'block' : null,
              position: 'absolute',
              zIndex: '300',
              height: '400px',
              width: '400px',
              top: '375px',
              left: '130px',
            }}
            src={Pepperoni}
            alt="pepperoni"
          />
        </div>
        <div>
          <img
            style={{
              display: this.state.Sausage ? 'block' : null,
              position: 'absolute',
              zIndex: '300',
              height: '400px',
              width: '400px',
              top: '375px',
              left: '130px',
            }}
            src={Sausage}
            alt="sausage"
          />
        </div>
        <div>
          <img
            style={{
              display: this.state.Pineapple ? 'block' : null,
              position: 'absolute',
              zIndex: '300',
              height: '400px',
              width: '400px',
              top: '375px',
              left: '130px',
            }}
            src={Pineapple}
            alt="pineapple"
          />
        </div>
        <div>
          <img
            style={{
              display: this.state.Peppers ? 'block' : null,
              position: 'absolute',
              zIndex: '300',
              height: '400px',
              width: '400px',
              top: '375px',
              left: '130px',
            }}
            src={Peppers}
            alt="peppers"
          />
        </div>

        <div>
          <input
            type="checkbox"
            name="pepperoni"
            id="pepperoni"
            value="Pepperoni"
            onChange={this.handleCheckClick}
            checked={this.state.Pepperoni}
          />
          <label for="pepperoni">Pepperoni</label>
        </div>
        <div>
          <input
            type="checkbox"
            name="sausage"
            id="sausage"
            value="Sausage"
            onChange={this.handleCheckClick}
            checked={this.state.Sausage}
          />
          <label for="sausage">Sausage</label>
        </div>
        <div>
          <input
            type="checkbox"
            name="pineapple"
            id="pineapple"
            value="Pineapple"
            onChange={this.handleCheckClick}
            checked={this.state.Pineapple}
          />
          <label for="pineapple">Pineapple</label>
        </div>
        <div>
          <input
            type="checkbox"
            name="Peppers"
            id="Peppers"
            value="Peppers"
            onChange={this.handleCheckClick}
            checked={this.state.Peppers}
          />
          <label for="Peppers">Peppers</label>
        </div>
      </div>
    );
  }
}

如何正确地将onChange事件传递给Reactjs中的多个输入复选框？

4 个答案: