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会通过，每次输入内容我都会在控制台中看到“Test”打印。但事实并非如此，因为我看不到任何东西。

但是如果我将this.props.onChange;包含在我的第一个组件内部，而不是像console.log(this.props.onChange)那样在console.log中，我在控制台中得到以下输出：

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

所以我认为onClick正在经历，但不会以某种方式调用函数。

Answer 1

你必须打电话给改变

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);
}

调用父函数onChange

1 个答案: