Reactjs 如何由于bootstraptable验证失败而禁用表单控制按钮

我有一个react组件，它包含一个表单和一个引导表。表单包含一个提交按钮，如果表单元格的输入未能通过验证，我希望禁用该按钮。我已经实现了验证器，但是我找不到一种方法将它们的结果与提交按钮的“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>
  }
}

class汽车扩展组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.ifColumns=[
{text:'rowID'，数据字段：''u id'，hidden:true}，
{文本：'Engine'，数据字段：'name'，排序：true，可编辑：false，
头型：（colum，colIndex）=>{
返回{width:'11%'，textAlign:'left'}；
},
验证器：发动机蒸发器
}
}
render（）
{
报税表（
this.handleSubmit（values）}>
车名
更新汽车
}
}

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

export const TextInput=（{withFieldValue，fieldValue，…props}）=>{
const textClassesNames=[“表单控件”]；
log（“内部：+JSON.stringify（fieldValue））；
if（fieldValue.toucted）{
if（fieldValue.valid）textClassesNames.push（“有效”）；
else textClassesNames.push（“无效”）；
}
返回(
)
}

---

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

因为您没有提供任何代码，我想您需要为

提交按钮添加验证状态

//添加禁用状态，该状态在验证成功时为true。
更新汽车

例如：

const验证='hello'；
函数ValidateForm（）{
const[value，setValue]=使用状态（“”）；
const[disabled，setDisabled]=使用状态（true）；
返回(
{
常数currValue=e.target.value；
设定值（currValue）；
如果（currValue==验证）{
setDisabled（prev=>！prev）；
}
}}
/>
提交
);
}

对于
react bootsrap
相同的示例：

const验证='hello'；
函数ValidateBootstrapForm（）{
const[value，setValue]=使用状态（“”）；
const[disabled，setDisabled]=使用状态（true）；
返回(
{
常数currValue=e.target.value；
设定值（currValue）；
如果（currValue==验证）{
setDisabled（prev=>！prev）；
}
}}
占位符=“输入Hello”
/>
提交
);
}

演示：

添加了一些代码，因此您可以查看并更改您的答案。答案是一样的，您缺少“this.handleSubmit”，并在卡组件中为验证按钮添加了一个状态。请参见示例，您应该找到它。此外，您不控制“TextInput”的状态，我不希望在点击该按钮时运行表单验证e submit按钮。正如您在代码中所看到的，字段被分配了在字段更改时运行的专用验证器。用户可以看到表单包含无效输入，我只想禁用该按钮。@omer我用bootstrap
表单
更新了答案和演示。