Reactjs 无法在表单中使用函数 构造函数（道具）{ 超级（道具）； this.submitQA=this.submitQA.bind（this）； this.onSearchChange=this.onSearchChange.bind（this）； this.isSearched=this.isSearched.bind（this）； this.answerSubmitted=this.answerSubmitted.bind（this）； 此.state={ 答复：[]， 答复:",， 搜索词：“”， } } 答复（事件）{ event.preventDefault（）； const input=event.target.querySelector（'input'）； 常量值=input.value； const updatedList=this.state.answer； updatedList.push（值）； this.setState（{answer:updatedList}）； } render（）{ 返回( 搜索： 问答： 提交 {basicFormat} {this.state.answers.filter（this.isSearched（this.state.searchTerm））.map（函数（项）{ 返回( {item} ) } ) } ); } }

为什么我不能在这里使用这个函数？错误：无法读取未定义的属性“answerSubmitted”。我不太清楚为什么会发生这种情况，我试着四处搜索，但我能找到的是，人们并没有像我这样绑定他们的方法。非常感谢您的帮助。

您传递给

map

的函数将更改

此

上下文。改用箭头函数：

constructor(props) {
  super(props);
  this.submitQA = this.submitQA.bind(this);
  this.onSearchChange = this.onSearchChange.bind(this);
  this.isSearched = this.isSearched.bind(this);
  this.answerSubmitted = this.answerSubmitted.bind(this);
  this.state = {
    answers: [],
    answer: '',
    searchTerm: '',
  }
}

answerSubmitted(event) {
 event.preventDefault();
 const input = event.target.querySelector('input');
 const value = input.value;
 const updatedList = this.state.answer;
 updatedList.push(value);
 this.setState({ answer: updatedList });
}



 render() {
    return (
    <div className="App">
      <div className="center">

        <form >
          Search:  <input type="text" onChange={this.onSearchChange}  /><br/>
        </form>

        <form onSubmit={this.submitQA}>
          Q & A:
          <input type="text" placeholder=" Course/Q/A"/>
          <button type="submit"> Submit </button>
        </form>
          <span>{basicFormat}</span>
      </div>

{ this.state.answers.filter(this.isSearched(this.state.searchTerm)).map(function(item) {
return (
    <div>
      <form >
        <text> {item} </text>
        <input onSubmit={this.answerSubmitted} type="text" placeholder="answer the question"/>
      </form>
    </div>
)
  }
    )
      }
      </div>
    );
  }
}

{this.state.answers.filter（this.isSearched（this.state.searchTerm））.map（（项）=>(
{item}
))}

箭头函数始终与定义它们的上下文具有相同的

此

。但是，其他函数会根据调用方式更改其

此

值

{this.state.answers.filter(this.isSearched(this.state.searchTerm)).map((item) => (
  <div>
    <form>
      <text> {item} </text>
      <input onSubmit={this.answerSubmitted} type="text" placeholder="answer the question"/>
    </form>
  </div>
))}