javascript - 调用父函数 onChange

Question

这是我的组件的一个片段:

...

  handleChange(event) {
    this.setState({text: event.target.value});
    this.props.onChange;
  }

  //Render
  render() {
    return (
      <input
        onChange={ this.handleChange.bind(this) }
        value={ this.state.text }
        type="text" />
    );
  }
}

...

我通过以下方式在另一个组件中调用

searchListing(event) {
    console.log("Test");
  }

  //Render
  render() {
    return (
      <div className="story-block-content">
        <TextInput onChange={this.searchListing.bind(this)} />
      </div>
    );
  }

我假设 onClick 会通过，每次我键入内容时，我都会在控制台中看到“测试”打印。但事实并非如此，因为我什么都看不到。

但是，如果我将 this.props.onChange; 包装在 console.log 中的第一个组件中，就像这样 console.log(this.props.onChange) 我会得到以下信息控制台输出:

    function searchListing(event) {
      console.log("Test");
    }

所以我认为 onClick 正在执行，但没有以某种方式调用函数。

Answer 1

你必须调用onChange

handleChange(event) {
    this.setState({text: event.target.value});
    this.props.onChange(); // <-- you forgot ()
    // or like this if you want to pass event:
    //this.props.onChange(event);
    // or like this to pass new value:
    //this.props.onChange(event.target.value);
}