他のボタンが押されるまでボタンを無効にする

Question

私は、評価が行われるまで無効にしたい送信ボタンがあります。

初期状態

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は機能しません。どんな助けもありがとう！

Answer 1

this.state.starsが常に定義されます。私は何だろうと、次のされています。ここでのonChange

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

ため

初期状態

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

機能を使用すると、

を無効にしたい場合は、ボタンを私の提出であります

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

ここで

は私のsubmitボタンであなたが

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

Answer 2

を非表示にする場合、あなたの本来の機能が完全に一つだけのブール値にstarsプロパティを変更しています。

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

    this.setState({ stars }) 
} 

そしてbind()を経由してインデックスに渡す：代わりに、実際に変更されましたスターに渡す必要があります。あなたのmap()からindexを得る：

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

Answer 3

あなたが行うことができます。

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

限り、ボタンを無効にすると、あなたが星のうち少なくとも一つはsome()を使用してアクティブであるかどうかを確認する必要があるだけでしょうそこまで簡単な方法は、

がアクティブ状態の配列を作成する必要はありません、あなたは

のようにそれを行うことができます

設定状態：

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>