javascript - native react - 根据所选按钮的数量更改 Prop 状态

Question

我正在使用夜灯按钮库:react-native-selectmultiple-button在这个库中有一个 Prop selected

描述:类型: bool 值。默认为假。 selected 属性决定按钮是否被选中并高亮显示

有没有一种方法可以根据所选按钮的数量更改“选定” Prop 的状态？

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

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

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

上面的代码将无法运行任何评论或建议将不胜感激:)

这是新代码:

<View style={{ flexWrap: 'wrap', flexDirection: 'row',backgroundColor:'gray',paddingTop:10,paddingLeft:6,paddingRight:0,borderColor:'white', borderWidth:1}}>
          {
            multipleData.map(
              (interest) =>
                <SelectMultipleButton
                  key={interest}
                  buttonViewStyle={{
                    borderRadius: 0,
                    height: 40,
                    width: 110,
                  }}
                  textStyle={{
                    fontSize: 15,
                  }}
                  highLightStyle={{
                    borderColor: 'white',
                    backgroundColor: 'transparent',
                    textColor: 'white',
                    borderTintColor: 'white',
                    backgroundTintColor: '#6AAAC6',
                    textTintColor: 'white',
                  }}
                  multiple={true}
                  value={interest}
                  selected={this.state.multipleSelectedData.includes(interest)}
          singleTap={valueTap => this.trackSelection(valueTap)} />
              )
          }
          </View>
        </ScrollView>

Answer 1

很抱歉延迟回复。请在下面查看我的示例组件。我在代码的内联注释中包含了解释。如果您需要进一步的帮助，请与我们联系。

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

编辑

我检查了 lib 中的代码和 SelectMultipleButton 组件中的 onPress 函数，这就是您的多项选择仍然有效的原因:

  <TouchableWithoutFeedback
    onPress={() => {
      if (this.props.multiple) {
        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)
        }
      }

    }
    }>

我知道修改库文件不是个好主意，但在这种情况下，您可以复制 this 而不是使用整个库。文件到您的项目(不要删除此文件顶部的作者信用)并向其添加 Prop selectable 并修改 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)
        }
      }

    }
    }>

这样传递 prop:

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

这应该可以解决您的问题。