Question

我有一个react组件，其中包含一个表单和一个引导表。表单包含一个提交按钮，如果对表格单元格的输入未通过验证，我想禁用该按钮。我已经实现了验证器，但是无法找到将其结果与Submit按钮的'disable'属性绑定的方法。以下是完整代码的简短版本：

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

TextInput的代码：

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

关于如何使用表验证的结果来控制“提交”按钮的“禁用”属性的任何想法吗？

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>
  );
}

演示：

由于引导程序验证失败，如何禁用表单控制按钮

1 个答案: