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>
    )
  }
}

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

1 个答案: