반응에서 material-UI 선택 상자에서 기본값을 설정하는 방법은 무엇입니까?
material-ui에서 Select box를 사용하고 있습니다.
기본적으로 선택된 "값 선택" 옵션을 표시하지만 해당 사용자가 이 옵션을 선택할 수 없게 된 후에는 이 옵션을 선택할 수 없습니다.
<FormControl required className={classes.formControl}>
<InputLabel htmlFor="circle">Circle</InputLabel>
<Select
value={circle}
onChange={event => handleInput(event, "circle")}
input={<Input name="circle" id="circle" />}
>
<MenuItem value="" disabled>
<em>select the value</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Some important helper text</FormHelperText>
</FormControl>
샌드박스의 현재 코드: https://codesandbox.io/s/xoylmlj1qp
다음과 같이 만들고 싶습니다.https://jsfiddle.net/wc1mxdto/
갱신하다
나는 상태를 바꿨다.20줄을 동그랗게 하다
form: {
searchValue: "",
circle: '',
searchCriteria: ""
}
이제 예상되는 출력은 드롭다운에 "값 선택"이 표시되어야 하지만 현재 이 값이 표시됩니다.
올바른 정보를 제공해야 합니다.MenuItem렌더에서 일치시킬 상태의 값.
그냥 지나가면 돼displayEmpty엄선하여
<Select
id="demo-simple-select-outlined"
displayEmpty
value={select}
onChange={handleChange}
>
menuItem을 정의합니다.
<MenuItem value=""><Put any default Value which you want to show></MenuItem>
React가 React-Hooks를 도입했기 때문에 React.useState(10)에서 기본값을 React.useState(10)로 전달하기만 하면 됩니다.
export default function CustomizedSelects() {
const classes = useStyles();
const [age, setAge] = React.useState(10);// <--------------(Like this).
const handleChange = event => {
setAge(event.target.value);
};
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.margin}>
<Select
value={age}
className={classes.inner}
onChange={handleChange}
input={<BootstrapInput name="currency" id="currency-customized-select" />}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="uni">UNI</InputLabel>
<Select
key={value}
defaultValue={value}
labelId="uni"
id="uni"
name="uni"
onBlur={onChange}
label="uni"
>
{unis.map((u, i) => (
<MenuItem value={u.value} key={i}>
{u.label}
</MenuItem>
))}
</Select>
</FormControl>;default Value 속성 select를 사용합니다.자세한 내용은 Material UI Select API Docs를 참조하십시오.
import React from 'react';
import {useState} from 'react';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
const Selector = () => {
const [Value, setValue] = useState("1"); // "1" is the default value in this scenario. Replace it with the default value that suits your needs.
const handleValueChange = event => {
setValue(event.target.value);
}
return(
<FormControl>
<InputLabel id="Input label">Select</InputLabel>
<Select
labelId= "Input label"
id= "Select"
value= {Value}
defaultValue= {Value}
onChange= {handleValueChange}
>
<MenuItem value="1">Item1</MenuItem>
<MenuItem value="2">Item2</MenuItem>
<MenuItem value="3">Item3</MenuItem>
</Select>
</FormControl>
)
};
export default Selector;
여기 머티리얼 UI의 Select API를 보시면 쉽게 할 수 있습니다.
- 위에서 설명한 바와 같이 상태 변수에서 기본값을 전달해야 합니다.
const [age, setAge] = React.useState(10);// <--------------(Like this).
- display Empty를 true로 설정합니다.
참일 경우 항목을 선택하지 않았더라도 값이 표시됩니다.의미 있는 값을 표시하려면 항목을 선택하지 않았을 때 표시되는 값을 반환하는 함수를 renderValue 프로펠러에 전달해야 합니다.네이티브 소품이 false(기본값)인 경우에만 사용할 수 있습니다.
<Select
displayEmpty
/>
저도 비슷한 문제가 있었어요.제 경우 onChange에 직접 기능을 적용했기 때문에 다음과 같은 기능이 있었습니다.
export default function CustomizedSelects() {
const classes = useStyles();
const [age, setAge] = React.useState(10);
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.margin}>
<Select
value={age}
className={classes.inner}
onChange={(event) => setAge(event.target.value)}
input={<BootstrapInput name="currency" id="currency-customized-select" />}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
); }
선택값을 클리어하기 위한 별도의 버튼(또는 기본 빈 값을 선택)도 있었습니다.Select 컴포넌트가 값을 선택하지 않았을 때 기본 폼으로 애니메이션화되지 않은 것을 제외하고 모두 동작하고 있으며, select 값이 올바르게 설정되어 있습니다.코드 예 @B4B와 같이 onChange를 핸들로 이동하여 문제를 해결했습니다.IPIN이 표시 중입니다.
저는 리액트 전문가가 아니라 아직 배우고 있습니다.이것은 좋은 교훈이었습니다.도움이 되었으면 좋겠다;-)
[ Select ]드롭다운에 표시할 오브젝트 목록을 가져와 useState를 사용하여 초기화합니다.값을 표시하고 드롭다운 변경 시 상태를 업데이트하려면 지금 상태를 사용합니다.
const ackList = [
{
key: 0,
value: "Not acknowledged",
},
{
key: 1,
value: "Acknowledged",
},
];
function AcknowledgementList() {
//state to initialise the first from the list
const [acknowledge, setAcknowledge] = useState(ackList[1]);
//update the state's value on change
const handleChange2 = (event) => {
setAcknowledge(ackList[event.target.value]);
};
return (
<TextField
select
fullWidth
value={acknowledge.key}
onChange={handleChange2}
variant="outlined"
>
{ackList.map((ack) => (
<MenuItem key={ack.key} value={ack.key}>
{ack.value}
</MenuItem>
))}
</TextField>
);
}
여기서의 문제는, MUI 유저측의 코드 조작에 관한 것입니다만, 몇개의 컴포넌트에 마법의 줄이 붙어 있어, 정말로 어리석은 일을 하고 있습니다.
여기 상태를 살펴보겠습니다.
const [age, setAge] = React.useState('3');
VALUE를 문자열로 지정해야 함을 알 수 있습니다.실제로 Select 컨트롤이 사용하는 데이터 유형은 string | undefined입니다.숫자 값을 문자열로 사용해야 하는 것이 혼란의 원인입니다.
그럼 어떻게 작동하죠?
모두 MenuItem 컴포넌트와 관련되어 있습니다.다음 내용을 살펴보겠습니다.
<MenuItem value={1}>First Choice</MenuItem>
<MenuItem value={2}>Second Choice</MenuItem>
<MenuItem value={3}>Third Choice</MenuItem>
MenuItem의 VALUE를 수치로 지정해야 하는 것을 알 수 있습니다.
따라서 이 경우 State 값으로 '3'을 문자열로 지정하면 로드 시 Third Choice가 선택됩니다.
Select 컨트롤의 VALUE를 상태 값으로 설정할 수 있습니다.
onChange 이벤트를 처리할 때는 event.target.value를 문자열로 변환해야 합니다.
언급URL : https://stackoverflow.com/questions/52182673/how-to-set-default-value-in-material-ui-select-box-in-react
'programing' 카테고리의 다른 글
| Oracle에서 현재 열려 있는 커서 찾는 방법 (0) | 2023.03.25 |
|---|---|
| Oracle SQL 날짜에서 시간을 제거하는 방법 (0) | 2023.03.25 |
| Angularjs를 사용하여 로컬 스토리지에 데이터를 저장하는 방법은 무엇입니까? (0) | 2023.03.25 |
| angularjs에서 inside select box 옵션을 ng-translate하는 방법 (0) | 2023.03.25 |
| 메뉴에 사용자 지정 게시 유형 보관을 추가하는 방법 (0) | 2023.03.25 |