在输入字段中映射数据时，模拟按键

Question

我正在从不同位置收集数据，目标是在输入字段中映射它们，以便用户可以编辑或立即复制数据。

现在，我正在使用.map函数在输入字段中打印的整个状态中收集所有数据。

我的任务是：如何在输入字段内的每个映射项目后添加休息。

以下内容不起作用（请注意，我尝试将＆lt; br>添加到输出中，但它只会给我＆lt; object对象>）：

render() {
  const {data} = this.props
  const listData = data.map((data) => data.tc + <br/>);
  return (
    <Form className="flex-item-100">
        <FormGroup>
            <Label for="exampleText">Test Cases</Label>
            <Input readOnly type="textarea" name="text" id="exampleText" value={listData} />
        </FormGroup>
    </Form>
  );
}

Answer 1

尽管我看到您正在使用一些自定义输入，但我认为它仍然不允许您将HTML作为输入字段的值。

另外，map不会返回字符串，它将为您提供数组，而数组再次无法用作输入的值，您需要的是join。像这样的东西

var values = valuesInArray.join('rn')

也使用Textarea代替输入

Answer 2

使用n代替<br />

const listData = data.map((data) => data.tc + 'n');