获取输入反应的名称

Question

新手反应。我想知道如何获得一个输入的名称，以便放置在一个方法参数。

<div >
<FormGroup style={{ width: "400px" }}>
<h3>Enter Barcode</h3>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Barcode:
</InputGroupText>
</InputGroupAddon>
<Input type="text" name="**BarcodeNUmber**" onChange={(e) => { this.onChangeInput(e) }} />
</InputGroup>
</FormGroup>
<Button onClick={() =>this.onProductSearch(**BarcodeNUmber**)} color="primary" type="button">
<span className="btn-inner--text">Confirm</span>
</Button>
</div>

Answer 1

我通常不会在react中使用类组件，但现在我们开始吧。变化:

1. 按钮在FormGroup
onSubmit添加到FormGroup
2. 按钮类型为"提交">
3. 使用输入值代替名称。
4. 状态控制输入值

App.js

import React from "react";
class App extends React.Component {
state = { barcodeNumber: null };
onProductSearch(barcodeNumber) {
///do what you want
}
onSubmit(event) {
event.preventDefault();
this.onProductSearch(this.state.barcodeNumber);
}
render() {
return (
<div>
<FormGroup onSubmit={this.onSubmit} style={{ width: "400px" }}>
<h3>Enter Barcode</h3>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>Barcode:</InputGroupText>
</InputGroupAddon>
<Input
type="text"
value={this.state.barcodeNumber}
onChange={(e) => {
this.setState({barcodeNumber: e.target.value);
}}
/>
</InputGroup>
<Button color="primary" type="submit">
<span className="btn-inner--text">Confirm</span>
</Button>
</FormGroup>
</div>
);
}
}

Answer 2

创建一个处理onChange并从事件目标中提取值的函数。

export default function App() {
const handleChange = (e) => {
console.log(e.target.name, ":", e.target.value);
}
return (
<div >
<FormGroup style={{ width: "400px" }}>
<h3>Enter Barcode</h3>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Barcode:
</InputGroupText>
</InputGroupAddon>
<Input type="text" name="**BarcodeNUmber**" onChange={handleChange} />
</InputGroup>
</FormGroup>
<Button onClick={() =>this.onProductSearch(**BarcodeNUmber**)} color="primary" type="button">
<span className="btn-inner--text">Confirm</span>
</Button>
</div>
);
}

Answer 3

从event对象访问:

onChangeInput(e) {
console.log(e.target.name);
}