홈>
다음이 있습니다 :
--- 렌더링 전 ---
const fontArray = [
["Standard", "Standard"], ["Abril FatFace", "'Abril Fatface', cursive"],
["Alfa Slab One", "'Alfa Slab One', cursive"],
["Chonburi", "'Chonburi', cursive"], ["Comfortaa", "'Comfortaa', cursive"],
["Lobster", "'Lobster', cursive"], ["Pacfico", "'Pacifico', cursive"]
]
--- 렌더 ---
<FormControl style={{margin: '10px'}}>
<InputLabel htmlFor="select-font">Font</InputLabel>
<Select
value={this.state.font[0]}
onChange={(evt)=>this.handleFontChange(evt)}
inputProps={{
name: 'font',
id: 'select-font',
}}
>
{fontArray.map((font, index)=>{
return(
<MenuItem key={font} value={font}>
<div style={{fontFamily: `${font[1]}`}}>
{font[0]}
</div>
</MenuItem>
)
})}
</Select>
</FormControl>
현재의
font
를 짐작할 수 있듯이
상태로 유지됩니다.
--- 선택 변경을 처리하는 방법 ---
handleFontChange = (event) => {
this.setState({ font: event.target.value })
};
따라서 원하는 것은 글꼴이 표시되는 글꼴을 선택할 수있게하는 것입니다. 그것은거의작동합니다. 예를 들어 선택을 클릭하면 다음이 표시됩니다.
그러나 선택 자체는 비어 있습니다 (상태가 채워 졌음을 확인한 경우에도 :
내가 뭘 잘못하고 있니? material-ui가 양식화 된 기본 텍스트를 처리 할 수 없습니까?
편집 : 아래 두 가지 대답은 가깝게 보이지만 내가하려는 일에 적합하지 않습니다.
바꾸면
<MenuItem key={font} value={font}>
with
<MenuItem key={font} value={font[0]}>
글꼴을 올바른 값으로 바꿉니다. 큰!
...하지만
this.state.font
를 대체합니다.
this.state.font[0]
와 함께
. 현재 핸들 기능을 다음과 같이 변경 하여이 기능을 사용하려고합니다.
handleFontChange = (event, fontArray, stateData) => {
let newFont = fontArray.filter(i=>{
if(i[0]==event.target.value){
return i
}
})
this.setState({ font: newFont })
};
this.state.font
를 설정하는 것
맞지만 다시는 그렇지 않습니다
선택 상자에 선택한 글꼴이 표시되도록하려는 것 같습니다.
흠 ....
해결됨
아래에 해결책이 수정되었습니다 :
사용하기
renderValue = (value) => {
return(
<div style={{fontFamily: `${value[1]}`}}>
{value[0]}
</div>
)
}
및
<...>
<Select
value={this.state.font}
renderValue={() => this.renderValue(this.state.font)}
<...>
주는 ...
- 답변 # 1
관련 자료
- javascript - angularjs의 다른 선택 목록에서 선택한 옵션을 비활성화하는 방법은 무엇입니까?
- javascript - 다중 선택을 보여주는 재료 선택 상자
- el - jsp의 select 태그에서 선택한 옵션을 어떻게 유지합니까?
- angular - Angular7 선택에서 선택한 옵션을 사용하여 다른 선택에서 옵션을 설정하십시오
- javascript - Materialise CSS에서 선택 입력을 선택한 옵션에 동적으로 일치시키는 방법은 무엇입니까?
- javascript - Material UI 자동 완성 구성 요소에서 옵션 선택 이벤트를 캡처하는 방법은 무엇입니까?
- angular - 선택 옵션의 선택된 값을 얻는 방법?
- javascript - 입력 태그의 단일 선택 옵션에서 선택한 각 값을 표시하는 방법
- jquery : 다른`select` 상자에서 선택한 옵션을 기반으로`select` 상자의 드롭 다운 값을 설정하는 방법
- php - Symfony의 ChoiceType 양식에서 선택 태그 안에 "선택 및 비활성화"옵션 태그를 추가하는 방법은 무엇입니까?
- r - 반응 형 반짝이에서 '모두 선택'옵션 구현
- angular - 선택 옵션 드롭 다운에 입력 텍스트 추가
- node.js - 첫 번째 선택에서 선택한 옵션에 따라 두 번째 선택의 옵션
- php - 편집 화면에서 EntityType에서 선택한 옵션이 선택되어 있지 않습니다
- angular - 사용자가 옵션을 선택해야 ng-select가 필요한 방법
- javascript - jQuery Chosen을 사용하는 동안 선택 목록 옵션 값 숨기기
- javascript - 변경 이벤트에서 옵션을 선택하고 다른 선택 옵션을 트리거하는 방법은 무엇입니까?
- JavaScript를 사용하는 Selenium WebDriver에서 선택한 항목을 선택하고 확인하는 방법
- javascript - select 옵션을 비활성화하기 위해 if 문을 만드는 방법은 무엇입니까?
- 앵귤러 재질 다이내믹 라디오 버튼은 여러 개를 선택할 수 있지만 그룹에서 한 번만 허용해야합니다
관련 질문
- html : 선택 입력을 클릭할 때 배경 이미지가 확대되는 이유
- html : 상자 내부에서 이미지가 왜곡됨
- css : 최대 2개의 행이 있는 오버플로 X
- css : Material UI는 여러 줄 텍스트 필드에서 컬러 텍스트를 지원하지 않습니다(React).
- reactjs : 중첩 라우터에서 자식 라우터를 클릭하면 아버지 라우터가 사라지기를 원합니다.
- css : 프론트엔드의 배경에 부서진 시각 효과를 만드는 방법이 있습니까?
- html : CSS가 ReactMde에 적용되지 않음
- css : 햄버거 메뉴 클릭 시 사이드 메뉴 변환 애니메이션이 제대로 작동하지 않음
- javascript : 웹사이트에서 임의의 인용문과 이미지를 가져오는 API를 찾으십니까?
- javascript : 애니메이션 스타일을 사용하여 div 요소의 내용 업데이트
renderValue를 사용하여이 문제를 해결할 수 있습니다.
렌더링 방법