Javascript react native-根据所选按钮的数量更改道具状态

我正在使用夜光按钮库： 此库中有一个已选择的道具

描述：

类型：布尔型。默认值为false。选定的道具决定按钮是否被选中并突出显示

是否有办法根据所选按钮的数量更改“已选”道具的状态

例如，如果我选择了5个以上的按钮，我希望其他按钮不可选择

    constructor(props) {
            super(props)
            this.state = {
             numberOfbuttonsSelected:0
            }
          }

      {
         if(this.state.numberOfbuttonsSelected <5){
             <SelectMulipleButton 
                 selected={true}/>}
         else{<SelectMulipleButton 
                 selected={false}/>
               }
       }

构造函数（道具）{
超级（道具）
此.state={
numberOfbuttonsSelected:0
}
}
{
if（this.state.numberofbuttons selected很抱歉延迟回复。请参阅下面我的示例组件。我已在代码内联注释中包含了解释。如果需要进一步帮助，请联系我们

export class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      numberOfbuttonsSelected: 0,
      multipleSelectedData: []
    };
  }

  //This method is what you mainly need
  trackSelection = value => {
    if (!this.state.multipleSelectedData.includes(value)) { //This checks if the value already exists in the checked buttons list
      if (this.state.numberOfbuttonsSelected < 5) { //Here we check if the number of selected buttons has exceeded the specified number
        this.state.multipleSelectedData.push(value);
        this.setState({
          numberOfbuttonsSelected: this.state.numberOfbuttonsSelected + 1
        });
      } //else do nothing. Effectively, we are disabling the click on the button.
    } else { //we are simply toggling the selection here
      this.state.multipleSelectedData.splice(
        this.state.multipleSelectedData.indexOf(value), 1
      );
      this.setState({
        numberOfbuttonsSelected: this.state.numberOfbuttonsSelected - 1
      });
    }
  };

  render() {
    return (
      //Customize your render function. I just included one button as an example.
      <View>
        <SelectMultipleButton
          multiple={true}
          value={interest} //"interest" is just an example value. Change it according to your requirements for each button.
          selected={this.state.multipleSelectedData.includes(interest)}
          singleTap={valueTap => this.trackSelection(valueTap)} //valueTap is supposed to be the "value" prop's value for each 
                //button according to the lib's documentation, but if you're not comfortable using valueTap, you can 
                //simply pass "interest" (or your own custom value for the particular button) into the trackSelection() method
        />
      </View>
    );
  }
}

我知道修改库文件不是一个好主意，但是在这种情况下，您可以不使用整个库，而是将文件复制到您的项目中（不要删除此文件顶部的作者信用），并向其添加一个prop
selective
，然后修改
onPress
，从而：

  <TouchableWithoutFeedback
    onPress={() => {
      if (this.props.multiple) {
        if(this.props.selectable) {
           this.setState({ selected: !this.state.selected })
           this.props.singleTap(this.props.value)
         }
      } else {
        if (!this.state.selected) {
          this.setState({ selected: !this.state.selected })
          this.props.singleTap(this.props.value)
        }
      }

    }
    }>

{
如果（此.props.multiple）{
如果（本道具可选）{
this.setState（{selected:！this.state.selected}）
this.props.singleTap（this.props.value）
}
}否则{
如果（！this.state.selected）{
this.setState（{selected:！this.state.selected}）
this.props.singleTap（this.props.value）
}
}
}
}>

这样通过道具：

<SelectMultipleButton
          multiple={true}
          value={interest} 
          selectable={this.state.multipleSelectedData.includes(interest) || this.state.numberOfbuttonsSelected < 5}
          selected={this.state.multipleSelectedData.includes(interest)}
          singleTap={valueTap => this.trackSelection(valueTap)} 
        />

this.trackSelection（valueTap）}
/>

这应该可以解决您的问题。
您是如何选择按钮的？是在用户交互还是以编程方式？如果是在用户交互上，您可以使用
singleTap
prop来禁用对未选择按钮的点击，具体取决于
numberOfButtonsSelected==5
。您还需要更改
numberOfButtonS每次选择或取消选择按钮时都被选中。@IshitaSinha非常感谢您的评论。我正在选择一个关于用户交互的按钮。我对react native非常陌生，如果您能给我一个简单的示例代码，这将非常有帮助。我编辑了答案。请查看是否有效。：）非常感谢您提供的定性代码和评论，这确实意义重大：）。我明白你想说的。但是你运行过这个代码吗？我运行了它，没有出现错误，但我仍然能够选择5个以上的按钮。不，我没有运行代码，因为这样我就必须将库的依赖项添加到项目和其他内容中。您是否可以设置断点并检查
this.state.numberOfButtonSelected
的值是否正在更改？如果点击所选按钮，是否会取消选择？是否将按钮的
interest
替换为特定值？另外，试着使
multiple={false}
，看看这是否有帮助。我以前从未使用过这个库，但已经制作了自定义的可检查按钮…所以我不能100%确定库是如何工作的…好的。尝试调试
trackSelection
方法，这会让您有所收获。：）天哪，非常感谢，它工作得非常好！我从你身上学到了很多。你是最棒的！：）酷。我将把它添加到答案中，以便其他面对这一问题的人可以在答案中得到这一点。我很高兴能帮上忙。：）
  <TouchableWithoutFeedback
    onPress={() => {
      if (this.props.multiple) {
        if(this.props.selectable) {
           this.setState({ selected: !this.state.selected })
           this.props.singleTap(this.props.value)
         }
      } else {
        if (!this.state.selected) {
          this.setState({ selected: !this.state.selected })
          this.props.singleTap(this.props.value)
        }
      }

    }
    }>

<SelectMultipleButton
          multiple={true}
          value={interest} 
          selectable={this.state.multipleSelectedData.includes(interest) || this.state.numberOfbuttonsSelected < 5}
          selected={this.state.multipleSelectedData.includes(interest)}
          singleTap={valueTap => this.trackSelection(valueTap)} 
        />