所以我从后端获取一些数据,看起来像这样
{"data":[{"status":1, "title":"Title 1"}, {"status":2, "title":"Title 2"}, {"status":1, "title":"Title 3"}, {"status":3, "title":"Title 4"}]}
它们将被映射到一个列表中,其中状态值决定了我喜欢下面的 3 个单选按钮之一
{data.map(d => {
return (
<ListGroupItem>
<Row>
{d.title}
<FormGroup>
<Input
type="radio"
name={d.title}
value="1"
checked={d.status === 1}
onChange={this.changeHandler}
/>
Open
</FormGroup>
<FormGroup check inline>
<Input
type="radio"
name={d.title}
value="2"
checked={d.status === 2}
onChange={this.changeHandler}
/>
In-progress
</FormGroup>
<FormGroup check inline>
<Input
type="radio"
name={d.title}
value="3"
checked={d.status === 3}
onChange={this.changeHandler}
/>
Closed
</FormGroup>
</Row>
</ListGroupItem>
);
})}
所以我的清单看起来像
Title 1 * open 0 in-progress 0 closed
Title 2 0 open * in-progress 0 closed
Title 3 * open 0 in-progress 0 closed
Title 4 0 open 0 in-progress * closed
(这不是展示这一点的最佳方式)
现在我需要在表单中使用它,以便在提交时所选值将更新后端中的数据。我该怎么做呢?另外,我将如何处理 onChange 事件,因为现在即使我选择单选按钮,也不会发生任何变化。
changeHandler = e => {
//map the data to the proper place
}
submitHandler = e => {
//submit the data
}
附:我对 React 很陌生,所以这可能不是最好的方法。如果有更好的方法请告诉我。