反应多个孩子似乎正在共享组件处理程序功能

Question

我在 React 中有一个相对简单的 Bootstrap 卡片布局，其中包含多张卡片，每张卡片上都有一个切换开关。但是，无论按下哪个切换开关，它总是被调用的第一张卡的处理函数（因此第一个切换改变状态）。我不明白他们为什么不调用自己的函数。

我的结构是卡片组有多个卡片孩子，每个卡片都有一个拨动开关孩子，例如卡片组 -> 卡片 -> 切换

卡片组

class CardDeck extends React.Component {
constructor(props) {
  super(props);

  this.state = {
    data: [
      {title: 'Cat 1'},
      {title: 'Cat 2'},
      {title: 'Cat 3'}
    ]
  }
}

render() {
  return (
    <div class="card-deck">
    {this.state.data.map((item, index) =>
          <Card
            key={index}
            title={item.title}
            index={index}
            id={index}
          />
         )}
    </div>
  );
}

}

卡片

class Card extends React.Component {
constructor(props) {
  super(props);

  this.state = {
    checked: false,
  }
  this.handleChange = this.handleChange.bind(this);
}

handleChange() {
  this.setState({
    checked: !this.state.checked,
  });
}

render() {
  return (
      <div class="card" key={this.props.index}>
        <div class="card-body">
          <h5 class="card-title">{this.props.title}</h5>
          <p class="card-text">Text</p>
        </div>
        <div class="card-footer">
          <Toggle checkStatus={this.state.checked} onChange={this.handleChange} key={this.props.index} />
        </div>
      </div>

  );
}

}

切换

class Toggle extends React.Component{
  render() {
    return (
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="customSwitches" onChange={this.props.onChange} checked={this.props.checkStatus} />
        <label class="custom-control-label" for="customSwitches">Label</label>
      </div>
    )
  }
}

Answer 1

一个简单的解决方法是将 id prop 传递给 toggle component，因为每个复选框控件 id 应该是唯一的，但在您的情况下，您对所有三个复选框使用相同的 id 属性值，以便在其他情况下区分我将 id prop 传递给 toggle component 并附加到每个复选框的 id 属性值，以使它们唯一。

切换组件

class Toggle extends React.Component {
  render () {
    console.log(this.props.id)
    return (
      <div className='custom-control custom-switch'>
        <input
          type='checkbox'
          className='custom-control-input'
          id={`customSwitches${this.props.id}`}
          onChange={this.props.onChange}
          checked={this.props.checkStatus}
        />
        <label
          className='custom-control-label'
          htmlFor={`customSwitches${this.props.id}`}
        >
          Label
        </label>
      </div>
    )
  }
}

卡片组件

class Card extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      checked: false
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange () {
    this.setState({
      checked: !this.state.checked
    })
  }

  render () {
    return (
      <div className='card' key={this.props.index}>
        <div className='card-body'>
          <h5 className='card-title'>{this.props.title}</h5>
          <p className='card-text'>Text</p>
        </div>
        <div className='card-footer'>
          <Toggle
            checkStatus={this.state.checked}
            onChange={this.handleChange}
            key={this.props.index}
            id={this.props.index}
          />
        </div>
      </div>
    )
  }
}