gpt4 book ai didi

javascript - 如何动态获取标签值并将来自不同输入的数字与 reactjs 相加

转载 作者:太空宇宙 更新时间:2023-11-03 22:16:37 29 4
gpt4 key购买 nike

创建了一个 Div,在其中我有 label 元素和 input 元素,我想在每个 div 中获得不同的标签值。如何重用我的 div 组件而不是再次编写相同的代码。

我尝试在 Stackoverflow 和谷歌中搜索,没有收到更好的答案。

我在这里创建了仅包含标签和输入元素的 div 元素,然后我在 App.js 文件中渲染了这个组件:我如何重用相同的代码/组件来创建另外 2 个 div 并在其中具有不同的标签值?我可以将不同输入的数字加在一起吗(我从不同的组件输入中获得)感谢您的帮助!


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 './components/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;

最佳答案

你应该传递一个 prop对您的组件进行重用。正如您注意到的那样,您在组件中使用了本地组件状态,例如 const {value} = this.state尝试相同的方法,但使用像 const {value} = this.props 这样的 Prop 然后在组件用法中传递该 Prop ,如

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

那行得通。希望对你有帮助

请记住,您可以使用所需的任意数量的 Prop ,并以与上述相同的方式访问它们

关于javascript - 如何动态获取标签值并将来自不同输入的数字与 reactjs 相加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56475242/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com