ReactJS refs problem

Question

Witam

Działam w Reactie od paru dni, ale mam teraz problem z "refs", zamieściłem wszystko tak jak w poradniku... mam nadzieje, lecz dalej zmienna "val" daje undefined.

    save: function() {
        var val = this.refs.newText.value;
        console.log(this.state.editing);
        console.log("new comment: " + val);
        this.setState({editing: false});
    },
    renderForm: function() {
        return (
            <div className="outsideBox"> 
                <textarea ref="newText" className="textEdit" defaultValue={this.props.children}></textarea>           
            <div className="savBtn" onClick={this.save}>Save</div>
            </div>
        );
    },
    render: function() {
            if (this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
            }
        });

 

Comments

Proponuję na wstępie przejść na nowy styl tworzenia komponentów React w formie funkcyjnej albo jako klasa rozszerzająca React.Component. Masz widocznie jakiś stary tutorial. Najlepiej odpuść go sobie i porób sobie przykłady z dokumentacji React.

Polecam bloga nafrontendzie.pl gdzie Kolega Bartek bardzo fajnie opisuje podstawy React, redux, itd.

I na razie na początku nie baw się "refs". Najpierw zapoznaj się dobrze z propsami, stanem itp. itd. bo jeśli zaczniesz od ref to może niepotrzebnie wyrobisz sobie nie najlepsze nawyki w pracy z React.

Answer 1

Podpisuję się wyżej lepiej nie zacząć od wersji React without ES6 bo tam można dostać w raka na początku.

Co do problemu nie dziw się, że obiekt val nie przejmuje żadnej wartości . Gdyż nie przekazujesz mu żadnej wartości. Pamiętaj, że musisz rozróżnić co jest DOM a co VDOM.  Powinaś mu przekazać eventTarget, oczywiście stosując bind() bądż arrow-function by wskazać które "this" nas interesuje w drzewie React.DOM. Teraz słusznie nie wie, co to jest val

A z tego co patrzyłem to ref wywołujesz na focus.

https://reactjs.org/docs/refs-and-the-dom.html