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>

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

    }
    }>

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

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

本机反应-根据选择的按钮数量更改道具状态

1 个答案: