javascript - 一旦在React的特定输入字段中键入文本，如何启用按钮？

因此，我很困惑，一旦尝试在名为Add的特定输入中键入文本，就试图在此Material UI dialog中启用company_name按钮。我有一个addEnable布尔状态值。我最初将状态设置为addEnable为false。然后，我在handleInputChanges输入字段的onChange事件中使用company_name。在该handleInputChanges中，我使用prevState的addEnable将其设置为true。但是该按钮未启用。

import React from 'react';
import axios from 'axios';
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Paper,
  Grid,
  MenuItem
} from '@material-ui/core';
import { Form, Field } from 'react-final-form';
import { TextField, Select } from 'final-form-material-ui';

interface CompanyFinancialModalState {
  addEnabled: boolean;
  [key: string]: any;
  values: IValues[];
}

export interface IValues {
  company_name: string;
  critical_technology: string[];
}

interface CompanyFinancialModalProps {
  open: boolean;
  onClose: () => void;
}

export class CompanyFinancialModal extends React.Component<
  CompanyFinancialModalProps,
  CompanyFinancialModalState
> {
  constructor(props: CompanyFinancialModalProps) {
    super(props);

    this.state = {
      addEnabled: false,
      company_name: '',
      critical_technology: [],
      values: []
    };
  }

  public render() {
    const { open, onClose } = this.props;
    const { addEnabled } = this.state;
    return (
      <>
        <Dialog
          open={open}
          onClose={onClose}
          className="company-financial-modal"
        >
          <DialogTitle id="company-financial-modal-title">
            {'Company and Financial Data'}
          </DialogTitle>
          <DialogContent>
            <div>
              <Form
                onSubmit={this.processFormSubmission}
                // validate={this.validateForm}
                // tslint:disable-next-line jsx-no-lambda
                render={({
                  handleSubmit,
                  /*  reset,  submitting, pristine, */ values
                }) => (
                  <form onSubmit={handleSubmit}>
                    <Paper style={{ padding: 16 }}>
                      <Grid container={true} alignItems="flex-start" spacing={2}>
                        <Grid item={true} xs={12}>
                          <Field
                            fullWidth={true}
                            required={true}
                            name="company_name"
                            component={TextField}
                            type="text"
                            label="Company Name"
                            onChange={this.handleInputChanges}
                          />
                        </Grid>
                      </Grid>
                    </Paper>
                  </form>
                )}
              />
            </div>
          </DialogContent>
          <DialogActions>
            <Button
              id="company-financial-modal-add"
              disabled={!addEnabled}
              onClick={onClose}
              color="primary"
            >
              Add
            </Button>
            <Button
              id="company-financial-modal-cancel"
              onClick={onClose}
              color="secondary"
              autoFocus={true}
            >
              Cancel
            </Button>
          </DialogActions>
        </Dialog>
      </>
    );
  }

  private handleInputChanges = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    this.setState({ [e.currentTarget.name]: e.currentTarget.value });
    this.setState((prevState) => {
      return { addEnabled: prevState.addEnabled }
    })
  }
}

export default CompanyFinancialModal;

最佳答案

尝试使用此代码将按钮更改为

<Button id="company-financial-modal-add" disabled={this.state.addEnabled} >
 </>

  并将状态addEnabled更改为true

handleInputChanges=(e)={ if(e.target.value===""){ this.setState( { addEnabled:true } ) }
else{ this.setState( {

    addEnabled:false } ) } }