Question

这是我的 SearchForm.js ，它会创建包含两个输入keywords和city的表单，并选择列表date

import React from 'react';
import ReactDOM from 'react-dom';

class SearchForm extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
       keywords: '',
       city: '',
       date: ''     
      }

      //this.handleChange = this.handleChange.bind(this)
      //this.handleSubmit = this.handleSubmit.bind(this)

      this.handleKeywordsChange = this.handleInputChange.bind(this);
     }

    handleKeywordsChange(event) {
        console.log(1);
    }

    render() {
        return ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>
                <div class="form-row">
                  <div class="form-group col-md-5">
                    <label for="keywords">Keywords</label>
                    <input type="text" class="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.name} />

                  </div>

                  <div class="form-group col-md-5">
                    <label for="city">City</label>
                    <input type="text" class="form-control" name="city" id="city" placeholder="City" onChange={this.handleChange} value={this.state.name} />
                  </div>

                  <div class="form-group col-md-2">
                    <label for="date">Date</label>
                    <select class="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.value}>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                 </div>

                 <div class="form-row">
                     <div class="form-group col-md-12">
                        <input id='formButton' className='btn btn-primary' type='submit' placeholder='Send' />
                    </div>
                 </div>
            </form>
        )
    }
}

export { SearchForm }

我需要为handleKeywordsChange之类的输入添加不同的句柄功能，但是有一些错误

我的bind出了什么问题？

Answer 1

我认为

中存在拼写错误

this.handleKeywordsChange = this.handleInputChange.bind(this);

您是否尝试过将其更改为

this.handleKeywordsChange = this.handleKeywordsChange.bind(this);

Answer 2

错误是因为：

    Date oldfashionedDateObject = new Date();

您需要定义this.handleKeywordsChange = this.handleInputChange.bind(this);，而不是handleInputChange：

handleKeywordsChange

原因是MDN Doc：

bind（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

所以在handleInputChange () { }方法中，你只是存储bind返回的函数的引用。所以实际的函数将是handleKeywordsChange，你需要定义。

将绑定自定义处理程序onChange重新绑定到输入

2 个答案: