ReactJs表单提交输入键按

我想提交我的表单，当输入键被按下，但如果我使用onSubmit={() => this.onSearchClick(this)}这是我的功能，我需要运行所有它它把表单放入我不想要的网址发生所有我需要做的就是让它运行该函数，这将执行一个API调用。ReactJs表单提交输入键按

我的代码是这样的

<form> 
     <h1>Search</h1> 
     <hr /> 
     <TextField floatingLabelText="Case ID" name="caseid" onChange={this.handleChange} /> 
     <br /> 
     <TextField floatingLabelText="Title" name="title" value={this.state.title} onChange={this.handleChange} /> 
     <br /> 
     <TextField floatingLabelText="Forename" name="forename" value={this.state.forename} onChange={this.handleChange} /> 
     <br /> 
     <TextField floatingLabelText="Surname" name="surname" value={this.state.surname} onChange={this.handleChange} /> 
     <br /> 
     <TextField floatingLabelText="Postcode" name="postcode" value={this.state.postcode} onChange={this.handleChangePost} /> 
     <br /> 
     <TextField floatingLabelText="Telephone Number" name="telephone" onChange={this.handleChange} /> 
     <br /> 
     <TextField floatingLabelText="Email Address" name="email" value={this.state.email} onChange={this.handleChange} /> 
     <br /> 
     {this.state.isLoggedIn ? <RaisedButton label="Search" onClick={() => this.onSearchClick(this)} primary={true} /> : <RaisedButton label="Search Disabled" primary={true} />} 
     &nbsp;&nbsp; 
     {this.state.isLoggedIn ? <RaisedButton label="New Entry" onClick={() => this.gotoNew()} primary={true} /> : <RaisedButton label="New Entry" primary={true} />} 
</form> 

onSearchClick = (value) => { 
    this.setState({ 
     loading: true, 
     searchQuery: value, 
     showCourtesy: false, 
    }, function() { 
     this.doSearch(); 
    }); 
}

调用该

doSearch() { 
    this.setState({ 
     loading: true, 
     showCourtesy: false 
    }, function() { 

    }); 
    var search_url = "http://10.0.2.31/testwebapi/api/data?" 
     + "forename=" + this.state.forename 
     + "&surname=" + this.state.surname 
     + "&caseid=" + this.state.caseid 
     + "&postcode=" + this.state.postcode 
     + "&telephone=" + this.state.telephone 
     + "&email=" + this.state.email 
     + "&title=" + this.state.title 

    var _this = this; 
    this.serverRequest = 
     axios 
      .get(search_url 
      ) 
      .then(function (res) { 
       _this.state.searchResults = res.data; 
       _this.setState({ 
        loading: false, 
       }) 
       console.log(res) 
      }) 
      .catch(function (error) { 
       console.log(error); 
       window.alert("Unauthorized To Access This Please Contact IT If You Believe You Should Be") 
      }) 
}

来源

2017-08-21 andy wilson

您需要在提交侦听器中放置'event.preventDefault（）'，并将该事件对象作为参数传递。 'onSubmit = {e => {this.onSearchClick（this）; e.preventDefault（）; }}' – pawel

@pawel我把它放在输入或表单上？ –

@andywilson'onSubmit'监听器进入'form'。 – pawel

要停止表单submit事件from re指导你需要拨打event.preventDefault方法。

您可以在线添加它，就像这样：

<form onSubmit={ e => { this.onSearchClick(this); e.preventDefault(); }}></form>

记住上面，就像你的原代码，通过一个参考组件onSearchClick方法，但是从你的代码看起来像该方法期望的字符串。但这超出了这个问题的范围。

您也可以重构您onSearchClick方法接受一个事件作为第一个参数：

onSearchClick = (event, value) => { 
    this.setState({ 
    loading: true, 
    searchQuery: value, 
    showCourtesy: false, 
    }, function() { 
     this.doSearch(); 
    }); 
    event.preventDefault(); 
} 

<form onSubmit={ this.onSearchClick.bind(this) }></form>

再次，value不会被通过。我建议使用refs来保留对查询输入字段的引用，所以值将是this.refs.query.value。

来源

2017-08-21 14:20:38 pawel

箭头函数不需要绑定，因为它们自动绑定到'this'。参见'最佳解决方案：ES2015箭头函数'https://medium.com/komenco/react-autobinding-2261a1092849 – Purgatory

@Purgatory你是对的（好吧，不仅他们不需要'bind'，他们不能绑定到另一个上下文）。从代码中我认为它被定义为组件的一个方法，并且在函数名称后错过了'='而不是'：'。否则，我不知道该方法所附的“this”是什么，也可能是全局对象。 – pawel

同意，是的，我认为'onSearchClick'函数是在'Component'类的上下文中，如果它是安全的'onSubmit = {this.onSearchClick}'，但是上面的解决方案将会在这两种情况下工作。 – Purgatory

<form onSubmit={() => this.onSearchClick(this)}> .... 

onSearchClick(event) { 
    event.preventDefault() 
    /* do stuff here */ 
}

的event.preventDefault（）函数将阻止与浏览器交互形式，让你进行内部API调用等。

来源

2017-08-21 14:11:14

在这种情况下，'this'不是'事件'对象，并且不会有'preventDefault'方法。 – pawel

ReactJs表单提交输入键按

回答

相关问题