Question

如果只添加了所有字段，我怎么能启用按钮？我可以这样做，如果我必须检查一个字段，但在这里我有多个字段也选择字段。这就是为什么我不知道这样做的原因。这是我已经完成的表格

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>

Answer 1

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

Answer 2

您可以在render()内进行所有逻辑计算，但在return之前进行。在那里你只需添加多个逻辑条件：

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

然后再次使用合适的逻辑运算符：

{showButton ? <FacebookPlatform> : null}

Answer 3

你也可以试试这个

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

我相信做这样的事情对你有用。

仅在填写完所有表单时单击启用按钮

3 个答案: