구체화 '선택'구성 요소의 작업 질문에 명시된 바와 같이

Question

을 반응하지, 나는 MaterializeCSS에서 선택 구성 요소를 사용하려고 해요/ 반응하고 웹 페이지 렌더링은 다음과 같다 : 텍스트가 회색으로 표시됩니다

나는 그것을 클릭하거나 상호 작용할 수 없다.

componentDidMount() { 
    var element = ReactDOM.findDOMNode(this.refs.dropdown) 
    $(element).ready(function() { 
    $('select').material_select(); 
    }); 
} 

그리고 내 에서

렌더링() 내가 가진 기능 :

import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 

내 componentDidMount은() 방법은 다음과 같습니다

내가 포함했다 : 이것은 내 관련 코드입니다 Materialize Website의 샘플 코드 :

<div class="input-field offset-s3 col s1"> 
    <select> 
    <option value="" disabled selected>Choose your option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <label>Materialize Select</label> 
</div> 

여기서 내가 뭘 잘못하고 있니? 나는 조언이 여기에 주어진 있지만 작동하지 않는 것 다음 :

How do I get the Materialize select dropdown to work with React?

내가 주변에 흐르고했지만 사람이 같은 동작을 설명과 다른 스레드를 찾을 수 없습니다.

Answer 1

React와 함께 jQuery를 사용하면 안됩니다. React는 virual DOM을 사용하여 UI를 만들고 jQuery는 일반 브라우저 DOM을 사용합니다. 즉, jQuery를 사용하여 상태를 처리하기 시작하면 React는 더 이상 상태, 이벤트 및 UI 렌더링을 처리하지 않습니다. (https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk). MaterializeCSS는 jQuery를 사용하여 많은 요소 (전부는 아닐지라도)와 상호 작용합니다.

또한 render 함수에서 react는 이벤트 핸들러를 포함하여 모든 DOM 속성과 속성에 대해 camelCasing을 사용합니다. CSS 클래스를 올바르게 사용하려면 class 대신 className을 사용해야합니다.