我正在創(chuàng)建一個表單，通過首先將它們映射到帶有標(biāo)簽和數(shù)字輸入的表單組來為錦標(biāo)賽提供不同數(shù)量的團隊種子。在表單被視為有效之前，如何才能使每個字段都必須是唯一的？所謂唯一，我的意思是每個字段都取一定范圍內(nèi)的某個數(shù)字，比如說，如果一場錦標(biāo)賽有 14 支球隊，那么每個字段應(yīng)該是 1 到 14 之間的數(shù)字，但兩個字段不應(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> ); }提交后，每個團隊都將被映射為{name, Seeding}。我希望每支球隊都有一個獨特的種子隊，因為稍后他們將根據(jù)種子隊被分類到池中。
1 回答
桃花長相依
TA貢獻1860條經(jīng)驗 獲得超8個贊
那么你可以做的是通過將數(shù)字輸入存儲在商店中來控制它們的值：
state = {
// other state,
inputs: {}
}
然后onChangeHandler設(shè)置狀態(tài)中每個輸入的值：
function onChangeHandler(e) {
const { name, value } = e.target;
this.setState({
inputs: {
...this.state.inputs,
[name]: value
}
})
}
然后，當(dāng)提交表單時，您可以添加檢查以查看值是否唯一，有很多方法可以做到這一點，我在這里所做的是從數(shù)組中刪除重復(fù)項，然后檢查數(shù)組的長度反對這樣的狀態(tài)的價值觀：
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)注
- 132 瀏覽
添加回答
舉報
0/150
提交
取消