React.js: Identifying different inputs with one onChange handler

by

I suggest sticking to standard HTML attributes like name on input Elements to identify your inputs. Also, you don’t need to keep “total” as a separate value in state because it is composable by adding other values in your state:

var Hello = React.createClass({
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },
    render: function() {
        const total = this.state.input1 + this.state.input2;

        return (
            <div>{total}<br/>
                <input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
                <input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
            </div>
        );
    },
    handleChange: function(e) {
        this.setState({[e.target.name]: e.target.value});
    }
});

React.renderComponent(<Hello />, document.getElementById('content'));

More Related Contents:

  1. How to add function in JSX?
  2. Loop inside React JSX
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. Why shouldn’t JSX props use arrow functions or bind?
  5. Render HTML string as real HTML in a React component
  6. React – User-Defined JSX Components Not rendering
  7. Applying className/onClick/onChange not working on Custom React Component
  8. How to use componentWillMount() in React Hooks?
  9. ReactJS – .JS vs .JSX
  10. Can I add a key prop to a React fragment?
  11. How to render HTML string as real HTML?
  12. ESLint with React gives `no-unused-vars` errors
  13. Passing props into external stylesheet in React Native?
  14. What do curly braces mean in JSX (React)?
  15. How to Call a Function inside a Render in React/Jsx
  16. How to have nested loops with map in JSX?
  17. Using styled-components with props and TypeScript
  18. Why can’t I directly modify a component’s state, really?
  19. How can I use multiple refs for an array of elements with hooks?
  20. ESLint Parsing error: Unexpected token
  21. React.createClass vs. ES6 arrow function
  22. Is it an anti-pattern to define a function component inside the render() function?
  23. In Firebase when using push() How do I get the unique ID and store in my database [duplicate]
  24. Functions are not valid as a React child. This may happen if you return a Component instead of from render
  25. How to use setState inside callback: ReactJS
  26. React hooks: call component as function vs render as element
  27. How can I block a React component to be rendered until I fetched all informations?
  28. using history with react-router-dom v6
  29. Difference between React Component and React Element
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment