Reactjs 在更改输入时对自定义处理程序作出反应

这是我的SearchForm.js，它使用两个输入

关键字和
城市创建表单，然后选择列表
日期

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 }

从“React”导入React；
从“react dom”导入react dom；
类SearchForm扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
关键词：''，
城市：''，
日期：''
}
//this.handleChange=this.handleChange.bind（this）
//this.handleSubmit=this.handleSubmit.bind（this）
this.handleKeywordsChange=this.handleInputChange.bind（this）；
}
handleKeywordsChange（事件）{
控制台日志（1）；
}
render（）{
报税表（
关键词
城市
日期
1.
2.
3.
4.
5.
)
}
}
导出{SearchForm}

我需要为输入添加不同的句柄函数，比如
handleKeywordsChange
，但是有一些错误


我的
bind
有什么问题？
我想这是一个打字错误

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

你试过把它换成新的吗

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

错误原因如下：

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

您需要定义
handleInputChange
，而不是
handleKeywordsChange
：

handleInputChange () {

}

原因如下：

bind（）方法创建一个新函数，该函数在调用时具有
此关键字设置为提供的值，并具有给定的
调用新函数时，将在任何函数前面提供参数

因此，在
handleKeywordsChange
方法中，您只是存储bind返回的函数的引用。因此，实际的函数将是
handleInputChange
，您需要定义它。
谢谢，它很有帮助！