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

Question

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

描述：Type:Boolean. Default is false. The selected prop determines whether the button is selected and highlighted

有没有办法可以根据选择的按钮数量来改变“选定”道具的状态？

例如，如果我选择了 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>

标签： javascriptreactjsreact-native

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 中的代码，组件中的onPress函数SelectMultipleButton是您的多项选择仍然有效的原因：

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

    }
    }>

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

    }
    }>

这样传递道具：

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

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