对于我的react Dapp,我需要将从一个组件提交的数据发送到另一个组件(需要数据的函数所在的位置)。
所以我想将在Master.jsx中的表单上提交的数据发送到App.js(createKit
):
Master.jsx:
class Master extends Component {
handleInputChange = (event) => {
let input = event.target;
let name = event.target.name;
let value = input.value;
this.setState({
[name]: value
});
};
render() {
return (
<Fragment>
<form className="addForm" onSubmit={createKit}>
<span>Barcode:</span>
<input name="barcode" className="barcorde" type="number"
onChange={this.handleInputChange}/>
<span>Owner</span>
<input name="owner" className="owner" type="text"
onChange={this.handleInputChange}/>
<span>Inventory</span>
<input name="inventory" className="inventory" type="text"
onChange={this.handleInputChange}/>
<button type="submit" value="submit">Add kit</button>
</form>
</Fragment>
);
}
}
export default withRouter(Master);
App.js:
class App extends Component {
state = {barcode: null, owner: "", inventory: ""};
createKit = (event) => {
event.preventDefault();
const cBarcode = this.state.barcode;
const cOwner = this.state.owner;
const cInventory = this.state.inventory;
console.log(cBarcode, cOwner, cInventory);
};
render() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/login"><Login /></Route>
<ProtectedRoute path="/home"><Dashboard /> </ProtectedRoute>
<Route exact path="/"><Redirect exact from="/" to="home" /></Route>
<Route path="*"><Redirect from="/" to="home" /></Route>
</Switch>
</Router>
</div>
);
}
}
export default App;
export const createKit = (event) => {
event.preventDefault();
const cBarcode = this.state.barcode;
const cOwner = this.state.owner;
const cInventory = this.state.inventory;
console.log(cBarcode, cOwner, cInventory);
};
我还创建了一个代码沙箱:https://codesandbox.io/s/react-login-auth-forked-53ht1
我试图通过props
来查看我的状态,但这没用:/。
我先感谢任何愿意花时间帮助的人。