反应禁用一个按钮，直到另一个按钮被按下答案

【问题标题】：React Disable a Button Until Another is Pressed反应禁用一个按钮，直到另一个按钮被按下
【发布时间】：2017-11-29 01:33:33
【问题描述】：

我有一个提交按钮，我想在放置评分之前禁用该按钮。

初始状态

this.state = {
      stars: [
        { active: false },
        { active: false },
        { active: false },
        { active: false },
        { active: false }
      ]
    };

onChange 函数

handleChange(e) {
    this.setState({stars: e.target.value})
  }

这是我的典型 5 星评级按钮的代码

<View style={styles.feedBackBtn}>
                {this.state.stars.map((item, index) =>
                  <Button
                    transparent
                    key={index}
                    onPress={() => this.rate(index)}>
                    value={this.state.stars}
                    onChange={this.handleChange}
                  </Button>
                )}
 </View>

这是我的提交按钮

<View style={styles.slideSelector}>
            <Button style={{ flex: 1}} block large
              onPress={() => this.goBack()}
              disabled={!this.state.stars}>
              <Text style={{ color: 'white', fontSize: 20, 
              fontWeight:"700" }}>SUBMIT</Text>
            </Button>
</View>

我认为 onChange 不适用于按钮，因为它不是输入。任何帮助将不胜感激！

【问题讨论】：

标签： javascript reactjs button react-native

【解决方案1】：

你可以做到这么简单，

不需要创建活动状态数组，你可以这样做

设置状态：

this.state = {
    stars: -1, // this will show star's selected index
    star_length : 5 // star's length
};

你的职能：

handleChange(e) {
    this.setState({stars: e.target.value}) // set the index which is clicked
}

渲染部分：

<View style={styles.feedBackBtn}>
    {
        // you can use this also Array.apply(null, Array(this.state.star_length)).map(...)
        [...Array(this.state.star_length)].map((x, i) => // loop through the length of array
            <Button
            transparent
            key={i}
            onPress={() => this.rate(i)}>
            value={i <= this.state.stars}
            onChange={this.handleChange}
            </Button>
        )}
    }
 </View>

 <View style={styles.slideSelector}>
    <Button style={{ flex: 1}} block large
        onPress={() => this.goBack()}
        disabled={this.state.stars === -1}> // just compare with selected index
        <Text style={{ color: 'white', fontSize: 20, 
        fontWeight:"700" }}>SUBMIT</Text>
    </Button>
</View>

【讨论】：

【解决方案2】：

this.state.stars 将始终被定义。我要做的是：

初始状态

this.state = {
  stars: [
    { active: false },
    { active: false },
    { active: false },
    { active: false },
    { active: false }
  ],
  hasRating: false
};

onChange 函数

handleChange(e) {
   this.setState({stars: e.target.value, hasRating: true})
}

这是我的提交按钮，如果你想禁用

<View style={styles.slideSelector}>
            <Button style={{ flex: 1}} block large
              onPress={() => this.goBack()}
              disabled={this.state.hasRating}>
              <Text style={{ color: 'white', fontSize: 20, 
              fontWeight:"700" }}>SUBMIT</Text>
            </Button>
</View>

这是我的提交按钮，如果你想隐藏

{this.state.hasRating &&
    <View style={styles.slideSelector}>
        <Button style={{ flex: 1}} block large
              onPress={() => this.goBack()}
        >
              <Text style={{ color: 'white', fontSize: 20, 
              fontWeight:"700" }}>SUBMIT</Text>
        </Button>
</View>}

【讨论】：

【解决方案3】：

您的原始函数将stars 属性完全更改为一个布尔值。相反，您需要传入实际更改的星号：

handleChange(e, index) {
  const stars = ...this.state.stars
  stars[index]['active'] = !stars[index]['active'];

  this.setState({ stars })
}

并通过bind() 传入索引。你从map() 获得index ：

onChange={this.handleChange.bind(this, index)}

至于禁用按钮，您只需要使用some() 查看是否至少有一颗星处于活动状态：

disabled={this.state.stars.some(star => star)}

【讨论】：