React : 외부 onChange 이벤트를 읽는 방법

Question

반응에서 외부 텍스트 변경 이벤트를 읽는 방법.

Grammarly 및 Auto Text Expander과 같은 확장명은 텍스트 영역 내부의 텍스트를 업데이트하지만 변경 후에는 변경된 onChange 또는 onInput 이벤트가 발생하지 않습니다. 결과적으로 상태가 업데이트되지 않고 조건이 일치하지 않습니다 (텍스트 영역과 구성 요소의 상태가 서로 다릅니다). 한 가지 방법은 제출시 DOM 값을 읽는 것입니다. 그러나 다른 시나리오는 텍스트 영역의 현재 값에 따라 다르므로 내 시나리오에는 완벽한 해결책이 아닙니다. 좋은 해결책이 있습니까?

추신 : 일반적인 해결책을 묻습니다. 확장 코드 변경은 옵션이 아닙니다.

Answer 1

jQuery 입력 플러그인을 사용할 때 이런 종류의 문제가 발생할 수 있으며 플러그인은 .prop 메소드 대신 .attr 메소드를 사용하여 onChange 이벤트를 트리거합니다. 이 경우, 플러그인이 제공하는 콜백 핸들러에 의존해야합니다.

귀하의 경우에는 그러한 콜백 처리기가있을 것 같지 않습니다. (코드를 사용할 수 있는지 확인하는 것이 결코 아프지 않습니다.) 그렇다면 유일한 옵션은 폴링 인 것 같습니다. 이는 추악하지만 피할 수없는 일입니다.

Answer 2

모두 onchange의 이벤트 리스너 또는 componentDidMount (자세한 내용은 구현을위한 스 니펫 참조)을 추가 할 수 있습니다. 그러면 React 내부의 상태가 업데이트됩니다. 스 니펫은 주석으로 잘 설명되어 있습니다. 그것은 당신을 도울 것입니다!

class KeyTrace extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.setValueToState = this.setValueToState.bind(this) 
 
    this.state = {} //initial state 
 
    } 
 
    setValueToState(e) { 
 
    this.setState({ 
 
    [e.target.id]: e.target.value //set the new value in the state as {[id]: [value]} pair 
 
    }) 
 
    } 
 
    componentDidMount() { 
 
    const textareas = document.querySelectorAll('textarea') //finds all textarea in the DOM 
 
    const textareasArray = [...textareas] //convert the HTML Collection into array 
 
    textareasArray.forEach((el) => { //loop through the array 
 
     if (el.id === 'update') //add onchange listener for specific textareas (optional) 
 
     el.onchange = this.setValueToState //add a event listener 
 
    }) 
 

 
    } 
 
    render(){ 
 
    console.log(this.state) 
 
    return false 
 
    } 
 
} 
 

 
ReactDOM.render(<KeyTrace/>, document.getElementById('react'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="non-react"> 
 
    Changes will be stored in react state 
 
    <br/> 
 
    <textarea id="update"></textarea> 
 
    <br/>Changes will not be stored in react state 
 
    <br/> 
 
    <textarea id="wont-update"></textarea> 
 
    <br/> 
 
</div> 
 
<div id="react"></div>

PS. blur (텍스트 영역 외부를 클릭하십시오) onchange 이벤트를 발생시키는 텍스트 영역이 필요합니다. 그렇지 않으면 onchange 대신 onkeypress을 사용할 수 있습니다.

Answer 3

이런 종류의 시나리오를 염두에두고 작성된 것은 아니지만, 아마도 https://github.com/erikras/react-native-listener을 통해 원하는 것을 얻을 수 있습니다.