最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to get label values dynamically and adding the numbers together from different input with reactjs - Stack Overf

programmeradmin6浏览0评论

Created a Div and inside it I have label element and input element, I want to get different label values in each div. How to re-use my div ponent instead of coding the same code again.

I have tried to search in Stackoverflow plus googles, Haven't received a better answer.

Here I have created div element with just label and input element and then I have rendured this ponent in App.js file: How can I reuse the same code/ponent to create 2 more div and having different labels values in it? Ho can I add numbers together from different input ( which I am getting from different ponents input) Appreciate all your help!


import React, { Component } from 'react';
import './calculator.css';

class Boxes extends Component {

    state = {
        inputOne: '',
        inputtwo: '',
        inputthree: ''
    }


    getInputValue = (e) => {
        const value = e.target.value;
        console.log('value: ', value);
        this.setState({
            inputOne: Number(e.target.value)
        });  

    }

    render() { 
        const { value } = this.props // destructuring
        const {inputOne, inputtwo, inputthree } = this.state

        return (
                <div className="boxes">
                    <label className="boxeslevel" htmlFor="text">
                       {value}
                    </label>
                    <input 
                    name="text" 
                    type="text" 
                    onChange={this.getInputValue}
                    />                    
                </div>

          );
    }
}

export default Boxes;

import React, { Component } from 'react';
import './App.css';
import Boxes from './ponents/calculator';


class App extends Component {
  render(){
    return (
      <div className="wrapper">
          <Boxes  value= {"Value 1:"} onChange={this.props.onChange}/>
          <Boxes  value= {"Value 2:"} onChange={this.props.onChange}/>
          <Boxes  value= {"Value 3:"} onChange={this.props.onChange}/>
          <ShowResult />
      </div>
    );
  }
  }


export default App;

Created a Div and inside it I have label element and input element, I want to get different label values in each div. How to re-use my div ponent instead of coding the same code again.

I have tried to search in Stackoverflow plus googles, Haven't received a better answer.

Here I have created div element with just label and input element and then I have rendured this ponent in App.js file: How can I reuse the same code/ponent to create 2 more div and having different labels values in it? Ho can I add numbers together from different input ( which I am getting from different ponents input) Appreciate all your help!


import React, { Component } from 'react';
import './calculator.css';

class Boxes extends Component {

    state = {
        inputOne: '',
        inputtwo: '',
        inputthree: ''
    }


    getInputValue = (e) => {
        const value = e.target.value;
        console.log('value: ', value);
        this.setState({
            inputOne: Number(e.target.value)
        });  

    }

    render() { 
        const { value } = this.props // destructuring
        const {inputOne, inputtwo, inputthree } = this.state

        return (
                <div className="boxes">
                    <label className="boxeslevel" htmlFor="text">
                       {value}
                    </label>
                    <input 
                    name="text" 
                    type="text" 
                    onChange={this.getInputValue}
                    />                    
                </div>

          );
    }
}

export default Boxes;

import React, { Component } from 'react';
import './App.css';
import Boxes from './ponents/calculator';


class App extends Component {
  render(){
    return (
      <div className="wrapper">
          <Boxes  value= {"Value 1:"} onChange={this.props.onChange}/>
          <Boxes  value= {"Value 2:"} onChange={this.props.onChange}/>
          <Boxes  value= {"Value 3:"} onChange={this.props.onChange}/>
          <ShowResult />
      </div>
    );
  }
  }


export default App;

Share Improve this question edited Jun 8, 2019 at 14:25 Ayesha asked Jun 6, 2019 at 10:00 AyeshaAyesha 2211 gold badge2 silver badges17 bronze badges 1
  • Thanks you so much for the quick response, And yes by passing props it works. I have wrapped all the ponents Boxes in a wrapper div, so when I try to toggle it via toggle device toolbar ( devtool) all my boxes falls apart. How can i make my boxes reponsiv so it stuck to the wrapper div and not falling apart, Thanks gain! – Ayesha Commented Jun 6, 2019 at 13:59
Add a ment  | 

3 Answers 3

Reset to default 2

You should pass a prop to your ponente to be reuse. As you notice you are using local ponent state in your ponent, like const {value} = this.state try the same approach but with props like const {value} = this.props and then passing that prop in the ponent usage like

<Boxes value={“label 1”}/>
<Boxes value={“label 2”}/>

That would work. Hope it help you

Remember you can use as many props you need and access them as the same way mention above

You can do something like this:

class Boxes extends Component {

    render() { 
        const { value } = this.props // value ing from props
        return (
            <div className="wrapper">
                <div className="firstBox">
                    <label htmlFor="text">
                       {value}
                    </label>
                    <input name="text" type="text" />                    
                </div>

            </div >

          );
    }
}

export default Boxes;

and in your app ponent something like this:

import React, { Component } from 'react';
import './App.css';
import Boxes from './ponents/calculator';


class App extends Component {
  render(){
    return (
      <div className="App">
        <Boxes value={1}/> 
        <Boxes value={2}/>
        <Boxes value={3}/>
      </div>
    );
  }
  }


export default App;

Here is live demo link

You have to use props instead of state in your Boxes ponent. Then you can pass the required props from the App ponent.

App.js

import React, { Component } from 'react';
import './App.css';
import Boxes from './ponents/calculator';


class App extends Component {
  render(){
    return (
      <div className="App">
        <Boxes value={"Value 1"}/>
        <Boxes value={"Value 2"}/>
        <Boxes value={"Value 3"}/>
      </div>
    );
  }
  }


export default App;

Boxes.js

import React, { Component } from 'react';
import './calculator.css';

class Boxes extends Component {
    render() { 
        const { value } = this.props // destructuring
        return (
            <div className="wrapper">
                <div className="firstBox">
                    <label htmlFor="text">
                       {value}
                    </label>
                    <input name="text" type="text" />                    
                </div>

            </div >

          );
    }
}

export default Boxes;

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论