Prac0311
192
2022-01-08 09:32:10
1
110

react 코드 질문..


리액트 코드 질문있는데요. 제가 리액트 개발자는 아닌데 코드를 갑자기 분석해야할 일이 생겨서
질문드려요..;  아래 코드인데요. 일부 생략된 코드가 있긴하지만; 


render() {
                        return a.default.createElement("div", {
                            className: "test"
                        },
                            this.context.t("test_react")), t ? a.default.createElement("textarea", {
                            className: "test_react_class",
                            onChange: e=>this.my_react_handle(e.target.value),
                            value: e
                        }), this.context.t("test_test"))))
}

class g extends a.Component {
    constructor(...e) {
        super(...e),
        (0,
                // 생략

                my_react_handle(e) {
                        const {t: t} = this.context;
                        let r = null;
                        const n = this.test2_func(e)
                          , o = n.split(/\s/u).length;
                        n && (o % 3 != 0 || o < 12 || o > 24) ? r = t("test_xc_req") : h(n) || (r = t("invalid")),
                        this.setState({
                            t_print: e,
                            t_print_error: r
                        })
                    }

저 render가 되고나면 프론트엔드에 textarea가 생성됩니다.
그리고 textarea에 사용자가 값을 작성할 경우 onChange에 있는 e=> this.my_react_handle이 실행되면서 입력한 값이 e로 넘어가게 되더라고요. 
여기서.. 원하는것은 저는 개발자도구로 textarea 값을 value나 이런걸로 수정할것인데 
그렇게하면 onchange는 실행되지않습니다. 어떻게 하든요. 그래서 onChange 내 함수인
this.my_react_handle을 직접 강제 실행하려고 해요.
즉, 개발자도구에서 코드를 작성해보자면

var main = document.getElementsByClassName("test_react_class");
main[0].value="axc";

위 스크립트를 통해 textarea 값에 axc가 들어가죠. 
그리고 onchange 내에 함수를 실행하려고 하는데 어떤식으로 실행해야하는건가요?
개발자도구에서 아래처럼 해도 호출이 안되더라고요.. 
this.my_react_handle("axc")

onchange를 하는 다른 방법이 있을 수도 있겠지만 이왕이면 onchange가 가리키는
함수를 직접 실행하는 방법을 해보고 싶습니다.

0
  • 답변 1

  • 푸르게
    679
    2022-01-08 10:28:16

    react library가 input 등의 value setter를 override 하여 사용하고 있다고 합니다.

    그래서 직접적으로 value 값을 수정하면 원하는대로 동작하지 않습니다.

    react 쪽으로 event를 넘겨주어야 합니다.


    const triggerInputChange = (node, value = '') => {
      const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
      const event = new Event('input', { bubbles: true });
    
      setValue.call(node, value);
      node.dispatchEvent(event);
    }
    
    var element = document.getElementsByClassName("test_react_class")[0];
    
    triggerInputChange(element, 'hi');



  • 로그인을 하시면 답변을 등록할 수 있습니다.