2017-04-04 58 views
0

我怎樣才能啓用按鈕只有當所有的領域被添加?我可以做到這一點,如果我必須檢查一個領域,但在這裏我有多個領域也選擇領域。這就是爲什麼我不知道如何做到這一點。這裏是形式我做啓用按鈕僅當所有表格填充後才能點擊

class Registration extends React.PureComponent { 
    state = { 
    valueOfCategory: 1, 
    valueOfPlatform: '', 
    }; 

    handleCategoryChange = (event, index, value) => this.setState({valueOfCategory: value}); 
    handlePlatformChange = (event, index, value) => this.setState({valueOfPlatform: value}); 
    addPlatform = (event, index, value) => this.setState({ platform: value }); 
    addCategory = (event, index, value) => this.setState({ category: value }); 
    render() { 
    return (
     <div className="registration"> 
     <Card> 
      <TextField 
      type="text" 
      hintText="Bot name" 
      /><br /> 
      <TextField 
      type="text" 
      hintText="Location" 
      /><br /> 
      <SelectField 
      value={this.state.valueOfCategory} 
      onChange={this.handleCategoryChange} 
      hintText="Category" 
      > 
      <MenuItem value={1} primaryText="Food" /> 
      <MenuItem value={2} primaryText="Travel" /> 
      <MenuItem value={3} primaryText="Communication" /> 
      </SelectField> 
      <FloatingActionButton onTouchTap={this.addCategory}><ContentAdd /></FloatingActionButton> 
      <br/> 
      <SelectField 
      value={this.state.valueOfPlatform} 
      onChange={this.handlePlatformChange} 
      hintText="Platform" 
      > 
      <MenuItem value={1} primaryText="Facebook" /> 
      <MenuItem value={2} primaryText="KIK" /> 
      <MenuItem value={3} primaryText="Slack" /> 
      </SelectField> 
      <FloatingActionButton onTouchTap={this.addPlatform}><ContentAdd /></FloatingActionButton> 
      <br/> 
      {this.state.valueOfPlatform === 1 && <FacebookPlatform />} 
      <RaisedButton label="Done" /> 
     </Card> 
     </div> 

回答

0

{(this.state.valueOfCategory || this.state.valueOfPlatform || this.state. platform || this.state.category) && <RaisedButton label="Done" />} 做這樣的事情..

0

你可以做內部render()所有的邏輯運算,但return之前。還有你只需要添加多個邏輯條件:

var showButton = (this.state.value1 != "" || this.state.value2 === 1); 

,然後再使用合適的邏輯運算符:

{showButton ? <FacebookPlatform> : null} 
0

你可以試試這個,以及

const {valueOfCategory, valueOfPlatform, botName, location} = this.state; 
const isEnabled = valueOfCategory.length > 0 && valueOfPlatform.length > 0 && botName.length > 0 && location.length > 0; 

,並在按鈕<RaisedButton label="Done" disabled={isEnabled} />

我相信做這樣的事情適合你。

相關問題