Как отключить кнопку управления формой из-за ошибки начальной загрузки

Question

У меня есть компонент реагирования, который содержит форму и таблицу начальной загрузки. Форма содержит кнопку отправки, которую я хотел бы отключить, если вход в ячейки таблицы не прошел проверку. Я реализовал валидаторы, но не могу найти способ связать их результат со свойством «отключить» кнопки «Отправить». Ниже приведена более короткая версия полного кода:

class Car extends Component {
  constructor(props) {
    super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.ifColumns = [
          {text: 'rowID', dataField: '_id', hidden: true},
          {text: 'Engine', dataField: 'name', sort:true, editable: false,               
              headerStyle: (colum, colIndex) => {
                  return { width: '11%', textAlign: 'left' };
              },
              validator: engineValidator
      }
  }
  render()
  {
    return(         
      <div className="col-md-7">
        <Card id='updCarCard'>
          <CardBody>
            <Form model="updCar" onSubmit={(values) => 
              this.handleSubmit(values)}>
                <Row className="form-group">
                  <Label htmlFor="name" md={3}>Car Name</Label>
                  <Col md={9}>
                    <Control.text model=".name" id="name" name="name" placeholder="Car Name" 
                      component={TextInput} withFieldValue
                      validators={
                        {   
                          maxLength: maxLength(15)
                        }
                      }
                    />
                    <Errors className="text-danger" model=".name" show="touched" 
                      messages={
                        {   
                          maxLength: 'Length must be at most 15'
                        }
                      }
                    />
                  </Col>
                </Row>
                <Row className="form-group">
                  <Col md={{size:10, offset: 3}}>
                    <Control.button model="updDevice" disabled={{ valid: false }} className="btn">Update Car</Control.button>
                  </Col>
                <div className="col-md-12">
                  <BootstrapTable striped hover condensed
                    keyField='_id' 
                    data={...}  
                    columns={ this.ifColumns }
                    defaultSorted={[{dataField: 'name',order: 'asc'}] } 
                    cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }/>
                </div>

              </Form>
            </CardBody>
          </Card>
        </div>
  }
}

Код для ввода текста:

export const TextInput = ({withFieldValue, fieldValue, ...props}) => {
  const textClassesNames = ["form-control"];
  console.log("Inside: " + JSON.stringify(fieldValue));
  if (fieldValue.touched) {
    if (fieldValue.valid) textClassesNames.push("is-valid");
    else textClassesNames.push("is-invalid");
  }
  return(
    <input className={textClassesNames.join(" ")} {...props} />
  )
}

Любые идеи о том, как я могу использовать результат проверки таблицы для управления свойством 'disable' кнопки отправки?

Answer 1

Поскольку вы не предоставили никакого кода, я полагаю, вам нужно добавить состояние проверки для кнопки submit button.

// add disabled state which true on validation success.
<Control.button model="updDevice" disabled={disabled} className="btn">Update Car</Control.button>

Например:

const VALIDATION = 'hello';

function ValidateForm() {
  const [value, setValue] = useState('');
  const [disabled, setDisabled] = useState(true);
  return (
    <>
      <input
        value={value}
        onChange={e => {
          const currValue = e.target.value;
          setValue(currValue);
          if (currValue === VALIDATION) {
            setDisabled(prev => !prev);
          }
        }}
      />
      <button disabled={disabled}>submit</button>
    </>
  );
}

Что касается react-bootsrap тот же пример:

const VALIDATION = 'hello';

function ValidateBootstrapForm() {
  const [value, setValue] = useState('');
  const [disabled, setDisabled] = useState(true);
  return (
    <div className="form">
      <Form>
        <Form.Group controlId="formBasicEmail">
          <Form.Control
            value={value}
            onChange={e => {
              const currValue = e.target.value;
              setValue(currValue);
              if (currValue === VALIDATION) {
                setDisabled(prev => !prev);
              }
            }}
            placeholder="Enter Hello"
          />
        </Form.Group>
        <Button disabled={disabled} variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </div>
  );
}

Демо-версия: