У меня есть пользователь с двумя параметрами (имя пользователя и группы пользователей)
У меня есть страница, которая обновляет моего пользователя, изменяя имя пользователя и обновляя группы
это выглядит как:
Проблема в том, что я не могу выделить группы, мне нужно выбрать обновление.
const AddUser = props =>{
let editing = false;
let initialUsername = "";
const[initialGroups, setInitialGroups] = useState([])
useEffect(()=>{
retrieveGroups();
},[])
const retrieveGroups = () => {
BackendService.getAllGroups()
.then(response => {
setInitialGroups(response.data);
})
.catch(e => {
console.log(e);
});
}
const[username, setUsername] = useState(initialUsername);
const[groups, setGroups] = useState(initialGroups);
const[submitted, setSubmitted] = useState(false);
const onChangeUsername = e => {
const username = e.target.value;
setUsername(username);
}
const onChangeGroups = e => {
console.log(e);
setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
}
const saveUser = () => {
var data = {
username: username,
groups: groups,
complited: false,
}
BackendService.editUser(
props.location.state.currentUser.id,
data)
.then(response=>{
setSubmitted(true);
console.log(response.data)
})
.catch(e=>{
console.log(e);
})
)
.catch(e=>{
console.log(e);
});
}
}
return(
<Container>
{submitted ? (
<div>
<h4>
User Edited Successfully
</h4>
<Link to={"/users/"}></Link>
Back to Users
</div>
):(
<Form>
<Form.Group className="mb-3">
<Form.Label>
"Edit" User
</Form.Label>
<Form.Control
type="text"
required
value={username}
placeholder="Enter username here"
onChange={onChangeUsername}
/>
<Form.Control
as="select"
multiple value={initialGroups}
onChange={onChangeGroups}
>
{initialGroups.map(group => (
<option key={group.id} value={group.id}>
{group.name}
</option>
))}
</Form.Control>
</Form.Group>
<Button variant="info" onClick={saveUser}>
"Edit" User
</Button>
</Form>
)}
</Container>
)
}
export default AddUser;
В этом разделе я получаю все группы (initialGroups), которые у меня есть в базе данных:
const[initialGroups, setInitialGroups] = useState([])
useEffect(()=>{
retrieveGroups();
},[])
const retrieveGroups = () => {
BackendService.getAllGroups()
.then(response => {
setInitialGroups(response.data);
})
.catch(e => {
console.log(e);
});
}
После того, как я поместил InitialGroups в:
<Form.Control
as="select"
multiple value={initialGroups}
onChange={onChangeGroups}
>
{initialGroups.map(group => (
<option key={group.id} value={group.id}>
{group.name}
</option>
))}
</Form.Control>
И обработать в:
const onChangeGroups = e => {
console.log(e);
setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
}
Что я делаю неправильно? Я не могу выделить группу, мне нужно обработать и обновить пользователя
привет @DanielJ, да я даже не могу выбирать группы
Вместо: value={initialGroups}
, пожалуйста, посмотрите, имеет ли вообще value={groups}
значение. Кроме того, пожалуйста, сделайте рендер из groups
(вместо: initialGroups.map
).
@ jsN00b привет, когда я перешел на value={groups}, я смог выбирать нужные мне группы. а если поменять на groups.map - все группы отчаялись
Ладно, думаю, я понял. В Array.from()
обратный вызов выбирает только значение. Попробуйте установить опцию так: <option key={group.id} name={group.name} value={group.id} >{group.name}</option>
. И я надеюсь, что console.log(e)
также покажет name
. Затем в обратном вызове мы можем попробовать: (v) => ({name: v.name, id: v.value});
@ jsN00b теперь после выбора одной группы исчезают все группы
Понятно. Давайте попробуем больше изменений. 1) По декларации: const[groups, setGroups] = useState(initialGroups.map(x => ({...x, checked: false;})));
. 2) В onChangeGroups
попробуйте: setGroups(prev => {const curr = [...prev].map((ob, idx) => { const selectedValues = Array.from(e.currentTarget.selectedOptions, (v) => v.value); if (selectedValues.includes(ob.id)) { ob.checked = !prev[idx].checked; }; return ob; }); return curr; });
И добавьте selected={group.checked}
в <option>
Я хотел бы внести следующие предложения:
const [groups, setGroups] = useState([]);
BackendService.getAllGroups()
.then(response => {
setGroups(response.data);
})
<Form.Control
as="select"
multiple
value={groups}
onChange={onChangeGroups}
>
{groups.map(group => (
<option key={group.id} value={group.id}>
{group.name}
</option>
))}
</Form.Control>
Надеюсь это поможет!
Привет, @tarp20, не могли бы вы немного объяснить вопрос? Проблема в том, что выбранные группы не отображаются как выбранные? Или что они не сохраняются при сохранении пользователя?