ReactJS使用Form进行多行输入

Question

我正在实现一个输入表单，希望它可以有一个固定的行数限制。例如，对于一个框，它将是一个三行输入框。如果多于3行，则在y轴上最好有一个滚动条（即，x轴上没有溢出）。我当前的代码是

for (const auto& it : zippedIterator(dataVector)) {
    someFunc(it.first, triplet.second);

    if (someCondition(it.second) && hasThirdElement) {
        anotherFunc(it.second, it.third)
    }
}

但它仅呈现一行的输入。

编辑：使用<Form> <FormGroup> <ControlLabel> Label </ControlLabel> <InputGroup> <FormControl value='default' onChange={<some function>} /> </InputGroup> </FormGroup> </Form> ，字体似乎很小。

Answer 1

以下代码片段解决了上述问题：

<Form.Group controlId="exampleForm.ControlTextarea1">
  <Form.Label>Example textarea</Form.Label>
  <Form.Control as="textarea" rows="3" />
</Form.Group>

Answer 2

FormControl的componentClass属性默认为“输入”，它呈现文本输入。

文本输入为单行。

因此，请尝试将FormControl的componentClass属性设置为“ textarea”：

<Form>
    <FormGroup>
        <ControlLabel>
            Label
        </ControlLabel>
        <InputGroup>
            <FormControl componentClass="textarea" value='default' onChange={<some function>} />
        </InputGroup>
    </FormGroup>
</Form>