Javascript : 반응 클래스의 한 인스턴스 내에서 요소를 선택하는 방법은 무엇입니까?

Question

React 구성 요소의 한 인스턴스 내에서 동일한 구성 요소 내에서 클릭 이벤트가 등록되면 요소 (특정 클래스가있는 div)를 선택하려고합니다. 이 클래스의 div가이 구성 요소의 다른 인스턴스에서 선택되는 것을 원하지 않습니다.

제 문제는 주어진 시간에이 구성 요소의 인스턴스가 여러 개있을 수 있다는 것입니다. 마운트 할 때 각 구성 요소에 대한 고유 한 ID를 만들어야합니까? 아니면 어떤 방법으로도 존재합니까? 구성 요소의 특정 인스턴스 내에서 발견 된 요소 만 참조 할 수 있습니까? React 클래스 내 콜백 함수를 어떻게 든 사용할 수 있습니까? 예를 들어

:

var MyClass = React.createClass({ 
    makeDivsBigger: function() { 
    ...? // How to only select the divs within the current instance? 
    }, 

    render: function() { 
    <div className="container"> 
     <div className="dark"></div> 
     <div className="light"></div> 
     <div className="bright"></div> 
     <button onClick={this.makeDivsBigger}></button> 
    </div> 
    } 
}); 

Answer 1

이 이것에 대해 갈 수있는 몇 가지 방법이 있어요,하지만 당신은 거의 수행하지 않으려는 한 가지 작업 할 요소를 찾기 위해 DOM을 조회 할 수 있습니다. 그 요소들은 이미 당신의 반응 우주 안에 있으므로 당신은 그것들을 찾을 필요가 없습니다!

더 나은 방법은 부모 구성 요소가 내부 상태를 사용하여 요소의 크기를 제어하도록하는 것입니다. 나는 간단 뭔가있을 거라고 알고,

var MyClass = React.createClass({ 
    getInitialState: function() { 
    return { 
     size: '' 
    }; 
    }, 

    makeDivsBigger: function() { 
    this.setState({ 
     size: 'bigger' 
    }) 
    }, 

    render: function() { 
    <div className="container"> 
     <div className={"dark " + this.state.size}></div> 
     <div className="light"></div> 
     <div className="bright"></div> 
     <button onClick={this.makeDivsBigger}></button> 
    </div> 
    } 
}); 

// somewhere in your CSS 
.bigger { 
    height: 500px; 
}