Javascript 仅当填写完所有表单时，才能单击“启用”按钮

如何使按钮仅在添加所有字段时才被单击？我可以这样做，如果我必须检查一个字段，但在这里我有多个字段也选择字段。这就是为什么我没有这样做的想法。这是我做的表格

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>

类注册扩展了React.PureComponent{
状态={
类别价值：1，
平台的值：“”，
};
handleCategoryChange=（事件、索引、值）=>this.setState（{valueOfCategory:value}）；
handlePlatformChange=（事件、索引、值）=>this.setState（{valueOfPlatform:value}）；
addPlatform=（事件、索引、值）=>this.setState（{platform:value}）；
addCategory=（事件、索引、值）=>this.setState（{category:value}）；
render（）{
返回(








{this.state.valueOfPlatform===1&&}

{（this.state.valueOfCategory | | this.state.valueOfPlatform | | this.state.platform | | this.state.category）&&}

---

执行如下操作。

您可以在

render（）

中执行所有逻辑计算，但在

返回之前，您只需添加多个逻辑条件：

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

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

{showButton ? <FacebookPlatform> : null}

{showButton？：null}
您也可以试试这个

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

和按钮中的

我相信这样做对你很有用