CODEWITHSUNDEEP
javascriptreactjs
Art F
Art F

Reputation: 4202

Passing form values to onclick handler in react.js

I am pretty new to React. I am trying to create a simple form and pass values into an 'onclick' handler. You can see the code below:

const reactContainer = document.getElementById('react');

let SForm = React.createClass({

    getApps: function(){
        getAppsExternal(document.getElementsByClassName("token")[0].value,document.getElementsByClassName("publisher_id")[0].value)
    },

    render: function(){
        return (
            React.createElement("div",{className: "container"},"",
                React.createElement("div",{},"Authentication Token: ","",
                    React.createElement("input",{type: "password",className:"token",maxLength:"30"})),
                React.createElement("div",{},"Publisher ID: ",
                    React.createElement("input",{type: "text",className:"publisher_id",maxLength:"7"})),
                React.createElement("button",{className:"get_apps_button",onClick:this.getApps},"Get Apps"))
            )
    }
})
let elementTester =React.createElement(SForm)
ReactDOM.render(React.createElement(SForm),reactContainer)

My question is, how do I pass the parameters into getAppsExternal the 'react' way without using document.getElementsByClassName ?

Upvotes: 4

Views: 1015

Answers (2)

Liam
Liam

Reputation: 6743

The simplest way, you can create a getInitialState then make a onChange function that will set the values to the state then you will be able to use them like this {this.state.password}

getInitialState: function() {
    return {password: '', publisher: ''};
  },
  onChange: function(e){
       this.setState({ [e.target.name]: e.target.value });
    },

  render: function(){
                     return (
                     React.createElement("div",{className: "container"},"",
                     React.createElement("div",{},"Authentication Token: {this.state.password}","",
                     React.createElement("input",{type: "password",className:"token",maxLength:"30",name: 'password',value: this.state.password,onChange: this.onChange.bind(this)})),
                     React.createElement("div",{},"Publisher ID: {this.state.publisher} ",
                     React.createElement("input",{name: 'publisher',type: "text",className:"publisher_id",maxLength:"7",value: this.state.publisher, onChange: this.onChange.bind(this)})),
                     React.createElement("button",{className:"get_apps_button",onClick:this.getApps},"Get Apps"))
                     )
                 }

Upvotes: 0

Overcl9ck
Overcl9ck

Reputation: 908

See: https://reactjs.org/docs/forwarding-refs.html

Assuming you use the lattest React, you can use React.createRef()

const reactContainer = document.getElementById('react');

let SForm = React.createClass({

    componentWillMount: function() {
      this.tokenRef = React.createRef()
      this.publisherRef = React.createRef()
    },

    getApps: function(){
        getAppsExternal(this.tokenRef.current.value, this.publisherRef.current.value)
    },

    render: function(){
        return (
            React.createElement("div",{className: "container"},"",
                React.createElement("div",{},"Authentication Token: ","",
                    React.createElement("input",{type: "password",className:"token",maxLength:"30", ref: this.tokenRef})),
                React.createElement("div",{},"Publisher ID: ",
                    React.createElement("input",{type: "text",className:"publisher_id",maxLength:"7", ref: this.publisherRef})),
                React.createElement("button",{className:"get_apps_button",onClick:this.getApps},"Get Apps"))
            )
    }
})
let elementTester =React.createElement(SForm)
ReactDOM.render(React.createElement(SForm),reactContainer)

If it's not available for you, there is the callback approach

const reactContainer = document.getElementById('react');

let SForm = React.createClass({
    setTokenRef: function(ref) {
      this.tokenRef = ref
    },

    setPublisherRef: function(ref) {
      this.publisherRef = ref
    },

    getApps: function(){
        getAppsExternal(this.tokenRef.value, this.publisherRef.value)
    },

    render: function(){
        return (
            React.createElement("div",{className: "container"},"",
                React.createElement("div",{},"Authentication Token: ","",
                    React.createElement("input",{type: "password",className:"token",maxLength:"30", ref: this.setTokenRef.bind(this)})),
                React.createElement("div",{},"Publisher ID: ",
                    React.createElement("input",{type: "text",className:"publisher_id",maxLength:"7", ref: this.setPublisherRef.bind(this)})),
                React.createElement("button",{className:"get_apps_button",onClick:this.getApps.bind(this)},"Get Apps"))
            )
    }
})
let elementTester =React.createElement(SForm)
ReactDOM.render(React.createElement(SForm),reactContainer)

As you're not using arrow functions, don't forget to bind your callbacks like above

Upvotes: 1

Related Questions