我正在創(chuàng)建一個(gè)表單，通過首先將它們映射到帶有標(biāo)簽和數(shù)字輸入的表單組來為錦標(biāo)賽提供不同數(shù)量的團(tuán)隊(duì)種子。在表單被視為有效之前，如何才能使每個(gè)字段都必須是唯一的？所謂唯一，我的意思是每個(gè)字段都取一定范圍內(nèi)的某個(gè)數(shù)字，比如說，如果一場錦標(biāo)賽有 14 支球隊(duì)，那么每個(gè)字段應(yīng)該是 1 到 14 之間的數(shù)字，但兩個(gè)字段不應(yīng)該能夠取相同的數(shù)字。renderButton() { return ( <Form onSubmit={this.handleSeedingSubmit}> {this.state.teams.map((team)=> <FormGroup key={team.name}> <Form.Label >{team.name}</Form.Label> <Form.Control type = "number" name={team.name} min={1} max={this.state.tournament.noTeams} onChange={this.onChangeHandler} required /> </FormGroup> )} <Button type="submit" > Submit </Button> </Form> ); }提交后，每個(gè)團(tuán)隊(duì)都將被映射為{name, Seeding}。我希望每支球隊(duì)都有一個(gè)獨(dú)特的種子隊(duì)，因?yàn)樯院笏麄儗⒏鶕?jù)種子隊(duì)被分類到池中。
1 回答
桃花長相依
TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊
那么你可以做的是通過將數(shù)字輸入存儲(chǔ)在商店中來控制它們的值：
state = {
// other state,
inputs: {}
}
然后onChangeHandler設(shè)置狀態(tài)中每個(gè)輸入的值：
function onChangeHandler(e) {
const { name, value } = e.target;
this.setState({
inputs: {
...this.state.inputs,
[name]: value
}
})
}
然后，當(dāng)提交表單時(shí)，您可以添加檢查以查看值是否唯一，有很多方法可以做到這一點(diǎn)，我在這里所做的是從數(shù)組中刪除重復(fù)項(xiàng)，然后檢查數(shù)組的長度反對(duì)這樣的狀態(tài)的價(jià)值觀：
function handleSeedingSubmit(e) {
e.preventDefault();
const { inputs } = this.state;
const valuesInState = Object.values(input);
const uniqueValuesArr = [...new Set(valuesInState)];
const areInputsValid = valuesInState.length === uniqueValuesArr.length;
if (!areInputsValid) {
// set Error here
return;
}
// Hurray!! Inputs are valid
// Handle Success case here
}
希望能幫助到你 ：）
- 1 回答
- 0 關(guān)注
- 168 瀏覽
添加回答
舉報(bào)
0/150
提交
取消