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