Question

我有两个组件-一个是 App.js ，另一个是 Login.js ，并且我在 Login 中放置了一个输入字段和按钮 strong>和方法放置在 App.js 中。因此，我想通过从App.js调用Login组件来绑定这些方法。

请仔细检查登录> 标记中的逻辑，就像每当我单击“轻拂”按钮时一样，它将控制该值一秒钟，然后页面会自动刷新。

App.js

handleFlick(e){

    console.log("Oho");
    e.preventdefault()
  }

handleChange(e) {

    this.setState({
      name: e.target.value
    })

render() {
    return (

      <div>
        <h1>{this.state.name} </h1><br></br>
        <p>first component</p>
        <Login
          handleChange={this.handleChange.bind(this)}
            handleFlick={this.handleFlick.bind(this)}

        ></Login>

Login.js

<div>
    <form>
        <input type="text" placeholder="enter name" onChange={(e) => { this.props.handleChange(e) }}></input>
        <button onClick={(e) => { this.props.handleFlick(e) }}>Flick</button>
    </form>
</div>

Answer 1

更改此：

<button onClick={(e) => { this.props.handleFlick(e) }}>Flick</button>

为此：

<button onClick={(e) => { this.props.handleFlick(e); e.preventDefault() }}>Flick</button>

类型submit在发送时默认会刷新页面

如何在ReactJS中同时绑定两个方法

1 个答案: