我的问题是我有一个简单的字符串列表说
import React from 'react'
class App extends React.Component {
state = {
num: 1
}
minValue = 0
maxValue = 10
addNum = () => {
const { num } = this.state
if (num < this.maxValue) {
this.setState({ num: num + 1 }, this.log)
}
}
minusNum = () => {
const { num } = this.state
if (num > this.minValue) {
this.setState({ num: num - 1 }, this.log)
}
}
log = () => {
console.log('number of issues is ' + this.state.num)
}
render() {
return (
<div className="incrementer">
<div>
<h2 className="minus" onClick={this.minusNum}>
-
</h2>
</div>
<div>
<h2 className="number">{this.state.num}</h2>
</div>
<div>
<h2 className="plus" onClick={this.addNum}>
+
</h2>
</div>
</div>
)
}
}
export default App
我只想在UI上显示它。用一些简单的代码,如
List<String> names = List.of("Frank","Joe","Eva");
我已经用 Table 进行了尝试,该表似乎可以正常工作,但是它后面的代码对于这个简单的任务(7-8行代码)有点重复。
我也尝试过 Grid 组件,当我想将POJO绑定到它时,它很好用,但是使用String.class键入它是一场噩梦。
ListComponent lc = new ListComponent.setItems(names);
它不起作用,因为我必须为该列提供getters,而String.class则不需要该值。所以我这样做了:
Grid<String> listGrid= new Grid<>(String.class) ;
listGrid.setItems(names);
有效!但是未指定的列也出现在网格中,所以现在我有3列Byte,Empty,name。而且我不知道为什么。这些是哪里来的?
答案 0 :(得分:2)
显示它们有哪些要求?只是为了让他们出现在屏幕上?标签够了吗?
for(String name: names) {
mylayout.addComponent(new Label(name))
}
如果需要选择,则可能是ListSelect或ComboBox。
答案 1 :(得分:1)
如果要避免增加其他列,一种方法是按照注释中的指示进行操作,即在继续创建自己的列之前执行removeAllColumns()
。
另一种方法是执行new Grid<>()
而不是new Grid<>(String.class)
。主要区别在于第二个构造函数在提供的类上使用反射,并自动为看起来像常规Java bean属性的任何事物配置列。
答案 2 :(得分:0)
我非常希望使用grid.removeColumnByKey
而不是removeAllColumns()
您还可以使用grid.setColumns
指定列的顺序。
我将使用Java示例为网格添加vaadin documentantion的链接,这确实很有帮助。 enter link description here
答案 3 :(得分:0)
我做了一些类似于在TextAreas中添加字符串的操作。因为需要格式化,所以我使用StringBuilder添加了文本。
List<String> details = getDetails();
StringBuilder builder = new StringBuilder();
for (String detail : details) {
TextArea ta = new TextArea();
ta.setSizeFull();
ta.setMaxHeight("100px");
ta.setValue(builder.append(detail).toString());
((Span) content).add(ta);
((Span) content).add(new Hr());
}
结果是这样的:
答案 4 :(得分:0)
尝试一下
final Grid<String> grid = new Grid<>();
grid.setItems(new ArrayList<String>());
grid.addColumn(item -> item).setHeader("Value");