检查是否所有输入组件字段均已填写，然后启用提交按钮

Question

我想要这样，当所有字段都填满（即不为空）时，将启用提交按钮。如果字段数是固定的，那么我可以轻松实现，但是在这种情况下，字段数是固定的，例如购物车中的物品。到目前为止，这是我的代码：

{orders.map((order, i) => (
<Row key={i}>
    <Col>
        <Row><Text>{o.quantity}</Text><Text>{`${order.name}`}</Text></Row>
    </Col>
    <Col> 
        <Item fixedLabel>
                <Label>$</Label>
                <Input placeholder={"0.00"} value={order.price} />
        </Item>
    </Col>
</Row>
))}
<Button disabled={this.state.disabled} onPress={this.submit.bind(this)}><Text>Submit</Text></Button>

Answer 1

将disabled的初始状态定义为false。然后，执行以下操作...

{orders.map((order, i) => {
  if(!order.name || !order.value) { this.setState({ disabled: true }) }
  <Row key={i}>
    <Col>
      <Row><Text>{o.quantity}</Text><Text>{`${order.name}`}</Text></Row>
    </Col>
    <Col> 
      <Item fixedLabel>
        <Label>$</Label>
        <Input placeholder={"0.00"} value={order.price} />
      </Item>
    </Col>
  </Row>
})}
<Button disabled={this.state.disabled} onPress={this.submit.bind(this)}><Text>Submit</Text></Button>

这里，它检查特定顺序的name或value是否为空。如果发现具有特定顺序的order或name的至少一个value为空，则将disabled设置为true。