У меня есть код material ui
для select dropdown
, который не может обновить выбранный вариант в раскрывающемся списке.
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel ref={inputLabel} htmlFor="outlined-Name">
Name
</InputLabel>
<Select
value={values.Name}
onChange={handleBChange}
labelWidth={labelWidth}
inputProps={{
Name: 'Name',
id: 'outlined-Name',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="1">Name1</MenuItem>
<MenuItem value="2">Name2</MenuItem>
<MenuItem value="3">Name3</MenuItem>
</Select>
</FormControl>
А ниже - необходимые события и JS.
const [values, setValues] = React.useState({
Name: ''
});
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
const handleBChange = event => {
event.preventDefault();
debugger;
setValues(oldValues => ({
...oldValues,
[event.target.Name]: event.target.value,
}));
};
Что не так в моем коде? Пожалуйста, предложите
0
Lara
25 Окт 2019 в 07:50
1 ответ
Лучший ответ
Я думаю, вам нужно использовать имя, а не имя как
const handleBChange = event => {
event.preventDefault();
setValues(oldValues => ({
...oldValues,
[event.target.name]: event.target.value,
}));
};
Надеюсь, это поможет
1
ibtsam
25 Окт 2019 в 07:59
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.
inputProps={{ name: 'Name', id: 'outlined-Name', }}