의미 론적 반응 ui 검색에 기본 메시지를 어떻게 배치합니까?

Question

https://react.semantic-ui.com/modules/search

아래는 의미 론적 반응 UI 검색 위젯이 어떻게 보이는지에 대한 이미지입니다. 두 번째 이미지에서 검색 바의 의미에 대한 메시지를 사용자에게 알려주는 메시지를 어떻게 표시 할 수 있는지 궁금합니다. 이 경우 "검색"입니다. 사용자가 입력하면 검색이 지워지고 사용자가 입력하는 내용이 반영됩니다. 난 defaultValue 될 줄 알았지 만, 당신은 가치와 defaultValue 동시에 설정할 수 없어 보인다. 나는 여전히 사용자가 상자에 입력 할 때 설정된 값을 읽을 수 있기를 원합니다.

감사

, 데릭

Answer 1

당신은 구성 요소의 초기 값, 아니 문제로 에게 DEFAULTVALUE를 사용할 수 있습니다. 는 다음과 같은 사용자 입력 이벤트에서 값 (예를 들면 및 onblur)를 읽어

onBlur(e) { 
    e.preventDefault(); 

    console.log(e.target.name, e.target.value); 
} 

각 새로운 캐릭터는 onSearchChange 이벤트에 사용할 수있는 누르면 값을 읽으려면 :

onSearchChange(e) { 
    e.preventDefault(); 

    console.log(e.target.name, e.target.value); 
} 

을 근무

: 편집 : 아래의 코멘트에 포함 허용 대답

placeholder={"text"} 

시맨틱 반응 UI 검색