Passing form values to onclick handler in react.js

Question

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 ?

The most common way is to use controlled inputs and have a state variable for each input value, and setting those in the input event handlers. — Tholle
– Tholle, Commented Jul 5, 2018 at 15:22

Overcl9ck · Accepted Answer · 2018-07-05 15:35:42Z

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

Liam · Accepted Answer · 2018-07-05 16:06:46Z

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"))
                     )
                 }

Collectives™ on Stack Overflow

Passing form values to onclick handler in react.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related