反应:将提交的数据从一个组件传递到另一个组件

时间:2020-11-03 11:06:32

标签: javascript reactjs forms event-handling decentralized-applications

对于我的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来查看我的状态,但这没用:/。

我先感谢任何愿意花时间帮助的人。

0 个答案:

没有答案